1 添加依赖

npm install svg-sprite-loader file-loader -D

2 在components目录下新增一个IconSvg.vue文件

<template>
<svg class="svg-icon" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template> <script>
export default {
name: "icon-svg",
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ""
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
}
}
};
</script> <style>
.svg-icon {
/*
这里可以自定义宽高
width: 1em;
height: 1em;
*/
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

3、添加icon-svg组件

  在main.js中 新增全局组件

   //引入svg组件
import IconSvg from './components/IconSvg' // //全局注册icon-svg
Vue.component('icon-svg', IconSvg)

4、配置vue.config.js

const path = require('path')
module.exports = {
/**这里之后,还有第一行的path是跟svg有关系的配置**/
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
// 配置icons的目录 我这里默认放在了 /src/assets/icons 目录下 如要修改 记得更换你的目录
.include.add(path.resolve(__dirname, './src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
// 配置icons的目录 我这里默认放在了 /src/assets/icons 目录下 如要修改 记得更换你的目录
.exclude.add(path.resolve(__dirname, './src/assets/icons'))
.end()
.use('file-loader')
.loader('file-loader')
}
}

5、使用方式

  导入.svg图标

  import "@/assets/icons/aa.svg"

  使用图标

  <icon-svg icon-class="aa" />



vue项目中配置svg图标 cli3路径的更多相关文章

  1. vue项目中配置favicon图标

    如上图所示,页面顶部的小图标会让页面显得高大上,一般把这种图标叫做favicon图标.利用vue-cli脚手架搭建的项目,如果不手动配置,页面中是不会显示favicon图标. 不配置是这样子的: fa ...

  2. Vue项目中使用svg图标

    svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader ...

  3. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  4. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

  5. 在vue项目中配置webpack

    首先我们来看一下使用Vue-cli2与Vue-cli2之后的版本(这里以Vue-cli4版本为例)创建项目目录结构的不同: Vue-cli2(左图)与Vue-cli4(右图)创建项目的目录 从上图可以 ...

  6. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  7. vue项目中配置scss

    之前创建 vue 项目的时候没有选择 scss 预编译,现在项目中要使用,不知道如何配置,网上搜了下全都是: npm  install sass-loader --save-devnpm instal ...

  8. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  9. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  10. vue中,svg图标添加click事件,部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

随机推荐

  1. Lua中创建新的文件夹

    如下: os.execute('mkdir 文件夹名称')

  2. usbip 非源码安装

    对于很多 Linux 发行版不能直接搜索 usbip 的包名进行安装 Kylin OS 其实他是包含在一个名为 linux-tools-generic 的软件包中的 对于 UOS 操作系统可以直接安装 ...

  3. 微服务减少jar包体积

    <build> <finalName>${project.artifactId}</finalName> <plugins> <!--打包jar- ...

  4. 0.96OLED软件实现DMA串口接收数据模拟滚屏效果

    实现的滚屏效果是当一屏写满时,则清空从开头接着写,不是上移的滚屏,虽然OLED有滚屏命令,但是会带水平位移效果,并且只能提前写好数据,类似于广告牌循环播放的那种. 首先是为OLED屏划分区域. 我选择 ...

  5. 如何实现基于GPIO按键的长按,短按,双击

    不同的架构实现并不相同,所以我分成了两中:STM32平台和其他平台: STM32平台 首先要分析:该如何判断当前的按键状态:单机和双击是通过在有限时间内是否有新的按动作产生 -- 所以需要一个记录按键 ...

  6. 自己写的java教程,免费分享

    自己写的一套java教程,主要用于内部培训使用,有需要的可以直接免费下载: http://it.zhenzikj.com/download/java.zip 一共写了3套: java语言基础.网络开发 ...

  7. Python学习的第一次总结

    执行Python的方式:1.交互器(不易保存,闪现,不方便看)2.用win-cmd 来执行(用notepad++保存后执行) 开始 >> cmd >> cd c:\ #切c盘& ...

  8. docker中搭建Ubuntu:16.04+python3.6+django环境

    用vim 新建一个Dockerfile和sources.list文件,在里面添加如下内容. #sources.list deb http://mirrors.163.com/ubuntu/ xenia ...

  9. py14模块简介

    """什么是模块 模块:就是一系列功能的结合体 模块的三种来源: 1.内置的(python解释器自带) 2.第三方的(别人写的) 3.自定义的(你自己写的) 模块的四种表 ...

  10. qt vnc 远程左桌面

    设备端启动服务器 ./testqt -qws -display VNC:0 客服端启动监控端 VNC Viewer 4