1、安装依赖
2、在config文件中配置
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
3、在src/components下新建文件夹及文件SvgIcon/index.vue，index.vue中内容如下
index.vue中的代码如下
4、在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件， index.js文件内容如下
其中index.js代码如下：
5、在main.js中引入
6、在项目中使用
在 阿里icon适量图库随便下载个svg格式的图，
在svg文件夹下，创建一个test.svg文件，将复制下来的svg代码贴进去
在项目中使用
效果：
vue-cli2的项目中如何引入
同样的上面的文件引入方式还是一样的：一样需要安装
在webpack.base.conf.js中加上：
rules中：
注意：由于vue-cli默认情况下会使用 url-loader 对svg进行处理（如下代码），会将它放在/img 目录下，所以这时候我们引入svg-sprite-loader 会引发一些冲突。我们可以使用exclude: [resolve('src/icons')]，让url-loader只处理除此文件夹之外的svg。
然后，就可以愉快在vue-cli2搭建的项目中使用svg了，使用方式和上诉相同
。