基於Vue & SVG 的 icon 解決方案

項目中圖標的解決方案

通常項目中的圖標解決方案有以下幾種:

• 設計師 提供 png 格式的圖標;
• 沒有設計師提供圖標, 須要咱們本身從 iconfont 上面找圖標. 好比在作一些 CMS後臺的時候.

本身找圖標的通常步驟

1. 打開 iconfont, 查找須要的圖標, 點擊 加入購物車按鈕.
2. 把全部 加入購物車 的圖標造成一個 項目.
3. 下載項目
4. 在本身的項目中引入 iconfont.css, 以及放置下載下來的資源文件.

這種方式存在的問題:

• 須要新增圖標的時候, 就蠻麻煩.
• 而後可能項目 A 使用到了圖標 12345, 項目 B 使用到了圖標 123. 此時若是項目 B 直接使用

A 項目的圖標資源(由於懶啊), 就會致使 45 沒有用到可是也加載了.

進一步的解決方案

每次都只下載一個 svg 文件下來.
這樣不會形成圖標冗餘. 而後也不須要去從新下載項目.

經過這種方式下載下來的 svg 文件, 咱們有幾種方式引入:

• 經過 img src="xx.svg" 的方式引入.//這樣方式不能修改 svg 的顏色.
• 直接在 html 裏面放 svg ? //太繁瑣.
• 經過 <use> 的方式引入, 容許咱們經過 css 修改顏色, 可是也有問題:

要求咱們將全部的 SVG 圖標合併成一個文件.
合併是一件事情, 合併以後, 就不能支持: 提早提供1000個圖標, 在打包的時候只打包被使用到的.

指望的使用方式

經過這種方式引入:

import Icon from 'wc-svg-icon';
Vue.use(Icon);

在須要使用圖標的時候:

<icon name="eye"/>
或者
<icon-eye/>

能不能實現? 能!

wc-svg-icon

基於 Vue & SVG 的 icon 解決方案

Install

npm i wc-svg-icon --save-dev

// main.js
import Icon from 'wc-svg-icon';
import 'wc-svg-icon/style.css';
Vue.use(Icon);

備註: style.css 不強制要求引入, 不引入也能夠正常運行, 只是 animation 參數無效.

Usage

<icon name="xxxx"/>

這裏的 'xxxx' 是你給定的 SVG 圖標的名稱. 好比說你如今有 10 個 SVG 圖標, 你須要作的事情是:
1. 在 node_modules 裏面找到 wc-svg-icon 目錄
2. 把這 10個圖標, 拷貝到 wc-svg-icon 目錄中.

Config

icon 組件接受如下 props 配置選項:

name:    圖標的名稱, 須要和 SVG 名相同, 不須要帶路徑.好比:
<icon name="hello"/>

fill:    SVG 圖標的 fill 顏色, 默認會使用 SVG 本來的顏色, 若是你傳遞了 fill 屬性, 則會使用你所傳遞的.好比:
<icon name="hello" fill="red"/> // 此時圖標會呈現 red 色. 

height:    控制 SVG 圖標的高度
width:    控制 SVG 圖標的寬度

固然你也能夠經過爲 <icon> 添加 class 的方式來設置 SVG 的樣式. 
<icon class="foo"/>
之因此把 fill, height, width 單獨提出來是由於這些對我而言常常用到.

animation:    設置圖標的動畫效果, 好比:
<icon animation="rotate"/>
... 當前只支持一種效果, 就是 rotate(旋轉).
其實這個玩意有點雞肋, 建議若是須要 animation 效果的同窗, 能夠直接本身寫 animation 或者引入 animate.css
而後這樣:
<icon class="animated bounce"/>

一些問題

後續會不斷的添加一些默認的 SVG icon, 因爲打包的時候沒有引入的icon 不會打包進項目, 因此icon的個數
不會影響到打包的體積大小.

若是你是但願將本項目直接拷貝到本身的項目中使用

• 拷貝 src/wc-svg-icon 目錄
• 安裝 xml-loader 依賴:

npm i xml-loader --save-dev

• 全部的圖標放在 wc-svg-icon/icons 下便可.

項目地址

wc-svg-icon