前言
工作中用到svg格式的图标，既然是svg，当然不想用古老的img方式引用，希望能凭借定义svg的fill属性，随意定义图标的颜色；同时不想将整段svg代码写入组建内，于是找到了使用vue-svg-icon来实现这个功能。
项目参考链接：https://www.npmjs.com/package/vue2-svg-icon
1. 安装
$ npm install vue-svg-icon --save-dev
安装之后，可以在node_modules／vue-svg-icon目录下找到相关文件
2. 将 svg 图片放入 src/svg
- src 文件夹和node_modules在同一个文件夹下
3. 引入 vue-svg-icon
- 大部分看到的教程里都说在 项目的 main.js 入口引入 vue-svg-icon 和需要使用的 svg 文件（不需要扩展名）
import Icon from 'vue-svg-icon/Icon.vue'
Vue.component('icon', Icon)
Icon.inject('wechat') // SVG图片名字（无扩展名）
- 不过我按照上述方式会报错，不能正常显示。于是只在调用svg的组件内，引入 vue-svg-icon
import Icon from 'vue-svg-icon/Icon.vue'
export default {
components: {
Icon
}
}
4. 使用icon标签
然后在引入 vue-svg-icon，调用svg的组件内，使用 icon标签就可以了～
<icon name="wechat" scale="20"></icon>
