前言

工作中用到svg格式的圖標(biāo)，既然是svg，當(dāng)然不想用古老的img方式引用，希望能憑借定義svg的fill屬性，隨意定義圖標(biāo)的顏色；同時(shí)不想將整段svg代碼寫(xiě)入組建內(nèi)，于是找到了使用vue-svg-icon來(lái)實(shí)現(xiàn)這個(gè)功能。
項(xiàng)目參考鏈接：https://www.npmjs.com/package/vue2-svg-icon

1. 安裝

$ npm install vue-svg-icon --save-dev

安裝之后，可以在node_modules／vue-svg-icon目錄下找到相關(guān)文件

2. 將 svg 圖片放入 src/svg

• src 文件夾和node_modules在同一個(gè)文件夾下

3. 引入 vue-svg-icon

• 大部分看到的教程里都說(shuō)在 項(xiàng)目的 main.js 入口引入 vue-svg-icon 和需要使用的 svg 文件（不需要擴(kuò)展名）

import Icon from 'vue-svg-icon/Icon.vue'
Vue.component('icon', Icon)
Icon.inject('wechat') // SVG圖片名字（無(wú)擴(kuò)展名）

• 不過(guò)我按照上述方式會(huì)報(bào)錯(cuò)，不能正常顯示。于是只在調(diào)用svg的組件內(nèi)，引入 vue-svg-icon

import Icon from 'vue-svg-icon/Icon.vue'
export default {
  components: {
    Icon
  }
}

4. 使用icon標(biāo)簽

然后在引入 vue-svg-icon，調(diào)用svg的組件內(nèi)，使用 icon標(biāo)簽就可以了～

<icon name="wechat" scale="20"></icon>