背景

對于前端而言，圖標(biāo)的發(fā)展可謂日新月異。從img標(biāo)簽，到雪碧圖，再到字體圖標(biāo)，svg，甚至svg也有了類似于雪碧圖的方案svg-sprite-loader。雪碧圖沒有什么好講的了，只是簡單地利用了background-position來做圖標(biāo)定位。今天咱們先聊聊怎么使用字體圖標(biāo)和svg圖標(biāo)。其實(shí)字體圖標(biāo)也不陌生了，bootstrap，font-awesome，element-ui等UI庫都基本標(biāo)配了字體圖標(biāo)。

簡單說下原理

unicode預(yù)留了E000-F8FF范圍作為私有保留區(qū)域，這個(gè)區(qū)間的unicode碼非常適合做字體圖標(biāo)，前端根據(jù)unicode碼就能顯示對應(yīng)的圖標(biāo)。

vue項(xiàng)目引入iconfont

1. 在iconfont新建項(xiàng)目

注：這里修正一下，前綴應(yīng)該是test-icon-。

2. 添加圖標(biāo)至項(xiàng)目

3. 使用iconfont

Unicode方式（不推薦）

在線使用

• index.scss中引入在線字體

@font-face {
    font-family: 'iconfont';  /* project id 1254715 */
    src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot');
    src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff') format('woff'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.svg#iconfont') format('svg');
}

• 頁面中使用

  使用時(shí)很不友好，使用的是unicode碼表示，使用圖標(biāo)還必須去iconfont項(xiàng)目去查詢下unicode碼。

<template>
    <div>
        <i class="iconfont">&#xe7ee;</i>
        <i class="iconfont">&#xe7ed;</i>
        <i class="iconfont">&#xe7ec;</i>
        <i class="iconfont">&#xe7eb;</i>
    </div>
</template>

效果圖如下：

本地使用

有時(shí)候網(wǎng)絡(luò)不是那么給力的，或者是內(nèi)網(wǎng)環(huán)境，那么就不要考慮用在線引用的方式了。

1. 本地使用需要先將字體庫下載并放到項(xiàng)目中。

2. 在全局樣式文件中定義如下代碼

   @font-face {
     font-family: "iconfont";
     src: url('../fonts/iconfont.eot'); /* IE9*/
     src: url('../fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */
     url('../fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */
     url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
     url('../assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
   }
   
   .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   

3. 使用方式

   與在線引用方式是一樣的，都是使用unicode碼去展示圖標(biāo)。

   <template>
       <i class="iconfont">&#xe7ee;</i>
   </template>
   

總結(jié)

• 兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。
• 支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小，顏色等等。
• 但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會自動去色。

Font class方式（較友好）

一種更友好的封裝，類似于font-awesome，我們只要使用class，就可以調(diào)用圖標(biāo)了。其原理就是利用before偽元素來顯示圖標(biāo)。

在線使用

超級簡單，只要在線生成代碼，引用在線的css文件即可使用。

在index.html中引用它。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1261797_48wm20jf8z.css">

項(xiàng)目中就可以使用字體圖標(biāo)了。

<template>
    <i class="iconfont cl-icon-fold"></i>
    <i class="iconfont cl-icon-delete-solid"></i>
</template>

本地使用

與unicode方式類似，下載代碼到本地。因?yàn)槲沂怯?code style="font-size: 14px;overflow-wrap: break-word;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;color: rgb(19, 148, 216);padding: 2px 6px;word-break: normal;">scss管理樣式的，需要在下載的代碼中提取出關(guān)鍵部分。除了引用字體庫，還要將其中的iconfont.css中定義的before偽元素全部復(fù)制到自己的scss文件中。

@font-face {
  font-family: "iconfont";
  src: url('../fonts/iconfont.eot'); /* IE9*/
  src: url('../fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */
  url('../fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */
  url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 列了一部分舉例
.cl-icon-user:before {
  content: "\e64b";
}

.cl-icon-video:before {
  content: "\e66b";
}

.cl-icon-pause:before {
  content: "\e7bd";
}

.cl-icon-orgnazation:before {
  content: "\e61b";
}

總結(jié)

• 兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
• 相比于unicode語意明確，書寫更直觀。可以很容易分辨這個(gè)icon是什么。
• 因?yàn)槭褂?code style="font-size: 14px;overflow-wrap: break-word;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;color: rgb(19, 148, 216);padding: 2px 6px;word-break: normal;">class來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。
• 不過因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

建議

由于加了新的圖標(biāo)需要重新在iconfont.cn重新生成代碼，所以這種方式也不算很方便，但是相對于unicode還是高級不少。根據(jù)我的經(jīng)驗(yàn)，建議在調(diào)試時(shí)，不要每次圖標(biāo)更新，就下載到本地更換。應(yīng)該先使用在線使用的方式，調(diào)試完畢確認(rèn)無誤后，再下載到本地使用，這樣對于效率提升有很大幫助。

symbol方式（支持多色圖標(biāo)）

svg的symbol提供了類似于雪碧圖的功能，讓svg的使用變得更簡單，也可以滿足做圖標(biāo)系統(tǒng)的需求。可以參考張大大博客^[1]了解更多關(guān)于svg symbol的知識。

在線使用

首先在iconfont項(xiàng)目中選擇symbol方式，并在線生成js代碼

然后在index.html中引入這個(gè)js文件

<script src="http://at.alicdn.com/t/font_1254715_oewlgci0ut.js"></script>

這個(gè)js的作用是在文檔中生成svg symbol

最后就可以在頁面中通過use標(biāo)簽使用svg圖標(biāo)了。xlink:href的值設(shè)置為對應(yīng)的symbol的id即可。

<svg aria-hidden="true">
    <use xlink:href="#test-icon-word-ext"></use> 
</svg>

效果如下：

多色圖標(biāo)還是酷！

本地使用

本地使用也是一樣的道理，主要是依賴這個(gè)在線生成的js文件，將在線js文件的鏈接在瀏覽器空標(biāo)簽中打開，就可以得到其內(nèi)容，然后復(fù)制內(nèi)容，自己命名一個(gè)js文件，并把它放在本地項(xiàng)目靜態(tài)資源目錄下，引用即可。

<script src="./static/js/symbols.js"></script>

圖標(biāo)自動管理（必看）

即使使用了symbol方式，當(dāng)設(shè)計(jì)小姐姐新增圖標(biāo)時(shí)，我們還是無法避免重新生成圖標(biāo)代碼。那么有沒有更優(yōu)雅的解決方案呢？答案是有的。svg-sprite-loader + require.context。

svg-sprite-loader網(wǎng)上已經(jīng)有太多文章了。

關(guān)于require.context，我倒是有一點(diǎn)自己的理解。請查看一張圖帶你了解webpack的require.context^[2]。

總結(jié)

• 支持多色圖標(biāo)了，不再受單色限制。
• 支持豐富的css屬性進(jìn)行定制。
• 兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
• 瀏覽器渲染svg的性能一般，還不如png。

參考