關於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>