vue項目中引入iconfont

背景

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

簡單說下原理

unicode預留了E000-F8FF范圍作為私有保留區域，這個區間的unicode碼非常適合做字體圖標，前端根據unicode碼就能顯示對應的圖標。

vue項目引入iconfont

1. 在iconfont新建項目

注：這里修正一下，前綴應該是test-icon-。

2. 添加圖標至項目

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');
}

• 頁面中使用

  使用時很不友好，使用的是unicode碼表示，使用圖標還必須去iconfont項目去查詢下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>

效果圖如下：

本地使用

有時候網絡不是那么給力的，或者是內網環境，那么就不要考慮用在線引用的方式了。

1. 本地使用需要先將字體庫下載並放到項目中。

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碼去展示圖標。

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

總結

• 兼容性最好，支持ie6+，及所有現代瀏覽器。
• 支持按字體的方式去動態調整圖標大小，顏色等等。
• 但是因為是字體，所以不支持多色。只能使用平台里單色的圖標，就算項目里有多色圖標也會自動去色。

Font class方式（較友好）

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

在線使用

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

在index.html中引用它。

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

項目中就可以使用字體圖標了。

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

本地使用

與unicode方式類似，下載代碼到本地。因為我是用scss管理樣式的，需要在下載的代碼中提取出關鍵部分。除了引用字體庫，還要將其中的iconfont.css中定義的before偽元素全部復制到自己的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";
}

總結

• 兼容性良好，支持ie8+，及所有現代瀏覽器。
• 相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
• 因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
• 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。

建議

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

symbol方式（支持多色圖標）

svg的symbol提供了類似於雪碧圖的功能，讓svg的使用變得更簡單，也可以滿足做圖標系統的需求。可以參考張大大博客了解更多關於svg symbol的知識。

在線使用

首先在iconfont項目中選擇symbol方式，並在線生成js代碼

然后在index.html中引入這個js文件

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

這個js的作用是在文檔中生成svg symbol

最后就可以在頁面中通過use標簽使用svg圖標了。xlink:href的值設置為對應的symbol的id即可。

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

效果如下：

多色圖標還是酷！

本地使用

本地使用也是一樣的道理，主要是依賴這個在線生成的js文件，將在線js文件的鏈接在瀏覽器空標簽中打開，就可以得到其內容，然后復制內容，自己命名一個js文件，並把它放在本地項目靜態資源目錄下，引用即可。

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

圖標自動管理（必看）

即使使用了symbol方式，當設計小姐姐新增圖標時，我們還是無法避免重新生成圖標代碼。那么有沒有更優雅的解決方案呢？答案是有的。svg-sprite-loader + require.context。

svg-sprite-loader網上已經有太多文章了。

關於require.context，我倒是有一點自己的理解。請查看一張圖帶你了解webpack的require.context。

總結

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

首發鏈接