專案中圖示的解決方案
一般專案中的圖示解決方案有如下幾種:
- 設計師 提供 png 格式的圖示;
- 沒有設計師提供圖示, 需要我們自己從 iconfont 上面找圖示. 比如在做一些 CMS後臺的時候.
自己找圖示的一般步驟
- 開啟 iconfont, 查詢需要的圖示, 點選 加入購物車按鈕.
- 把所有 加入購物車 的圖示形成一個 專案.
- 下載專案
- 在自己的專案中引入 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 下即可.