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。

首發連接