快應用之---使用阿裡圖示庫iconfont

目的：快應用自 

1030

 開始（新增：font-family 及 font-face 支援），,就可以使用

字型圖示

了，使用iconfont可以減少圖檔,加快渲染速度,使用後圖示可以像文字一樣改變大小和顔色

流程：

1、首先在阿裡巴巴矢量圖庫中将所需要的圖示放入到對應的項目中,找到我的項目如圖2

将圖示檔案下載下傳至本地

2、在css裡自定義font-face

@font-face {

    font-family: iconfont;

    src: url('./iconfont.ttf')

}

.iconfont{

    font-family: iconfont;

    font-size: 36px;

 }
           

3、在template中的使用，class 中添加自定義的圖示class,如2中的iconfont

（1）直接使用圖示Unicode展示 

<text class="iconfont" >&#xe698;</text>
           

（2）對于定義在變量中的字型編碼，需要轉碼

   <text class="iconfont" >{{ unescapeIconCode(iconCode) }}</text>
           

  script 中的轉碼方法：

export default {

    data(){

      return {

        iconCode:''

      }

   }，

   unescapeIconCode(iconCode = '') {

         return unescape(iconCode.replace(/&#x/g, '%u').replace(/;/g, ''))

  }

 }
           

定義變量中的編碼需要轉碼，不然不展示，重要的事說三遍三遍三遍.......