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