关于vue-svg-icon的使用方式

前言

工作中用到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>