一個vue2的多色圖標方案：vue-svg-icon

示例: https://cenkai88.github.io/vu...

項目地址: https://github.com/cenkai88/v... 求star～～
我的的第一個vue組件，但願你們多多支持啦～?
基於vue-awesome擴展而來
其實想到寫這個的緣由主要是在開發中經常須要用到圖標，這一塊經歷了四個階段。

1. 用的awesomeFont之類的庫

2. 發現iconfont以後，每用到一個圖標就去搜一個加入到工程中，自定義程度更高，也減小圖標引入。

3. 從iconfont下了圖標以後用illustrator編輯形狀或者顏色以後達到更高的定製性。

4. 在寫這個組件以前，發現SVG圖片其實就是XML格式的標籤，其中fill屬性六位顏色值的路徑會根據值渲染顏色，而fill爲空的可被HTML中該SVG節點css3的**color
   **屬性控制，這樣的話咱們能夠爲圖標賦予兩種狀態。

組件特色:

• 可即時在illustrator中編輯svg圖片

• 可經過css的color屬性動態地調整svg中某一部分的顏色

• 能夠經過上面所提到的兩種狀態方便地完成一些功能（如tabbar）

1. 安裝

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

2. 將svg圖片放入src/svg

這裏安利一個svg圖片庫iconfont

• src/svg路徑暫時不可配置

• src文件夾應和node_modules在同一個文件夾下

3. 在項目的main.js入口引入vue-svg-icon和須要使用的svg文件名（不需擴展名）

import Icon from 'vue-svg-icon/Icon.vue';Vue.component('icon', Icon);
Icon.inject('chameleon'); // SVG圖片名字（無擴展名）

4. 在網頁中使用icon標籤就能夠啦！

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

注意

在illustrator中編輯svg圖片時

• 注意illustrator中全部的矩形線段等等需轉成複合路徑再保存。

• 編輯完保存時，請選擇"另存爲"，在"高級選項"中將"css屬性"設置成演示文稿屬性
  

• 須要經過css動態設置顏色等部分請將填充色設爲純黑(#000000)，若是想設置黑色但不受svg的color影響請將填充色設爲(#000001)

• 推薦svg尺寸爲200*200

若是你讀到這了，那麼這個插件八成適合你，請移步vue-svg-icon