iconfont的三種使用方式

在我們項目中經常要使用到iconfont，在此我們使用阿里巴巴矢量庫提供的icon圖標，此圖標庫足夠為我們提供大量的圖標，我們首先需要的事在阿里巴巴矢量圖標庫新建一個自己的賬號，並且新建一個項目，這個項目包含了你所有要用到的圖標。我們需要選中需要的圖標放到自己的項目中，並下載下來放到自己項目下的iconfont文件夾之下。（需要更新圖標時，下載包也需要重新下載更新）

方式一：使用symbol方式（本質是用svg標簽構成的）

第一步：為了代碼更好的復用，我們封裝一個svg-icon組件，代碼如下：

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>
</template>
<script>
export default {
 name: 'svg-icon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.iconClass}` // 注意：因為此處綁定的svgClass名已經包含#icon，所以復制symbol名字事不需要名字的前綴了
  },
  svgClass() {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>
<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

第二步：在main.js中引入

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>
</template>
<script>
export default {
 name: 'svg-icon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.iconClass}` // 注意：因為此處綁定的svgClass名已經包含#icon，所以復制symbol名字事不需要名字的前綴了
  },
  svgClass() {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>
<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

第三步：使用

在自己需要用到的組件中：

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>
</template>
<script>
export default {
 name: 'svg-icon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.iconClass}` // 注意：因為此處綁定的svgClass名已經包含#icon，所以復制symbol名字事不需要名字的前綴了
  },
  svgClass() {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>
<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

另外兩種使用方式是使用unicode和fontclass方式，如上面的代碼所示引入與使用友情鏈接批量查詢

然后我們談談這三種方式的優缺點吧

unicode：

優點：

兼容性最好，支持ie6+
支持按字體的方式去動態調整圖標大小，顏色等等

缺點：

不支持多色圖標
在不同的設備瀏覽器字體的渲染會略有差別，在不同的瀏覽器或系統中對文字的渲染不同，其顯示的位置和大小可能會受到font-size、line-height、word-spacing等CSS屬性的影響，而且這種影響調整起來較為困難
不直觀，看unicode碼很難分辨什么圖標

fontclass：

兼容性良好，支持ie8+
相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。

symbol：

支持多色圖標了，不再受單色限制。
支持像字體那樣通過font-size,color來調整樣式。
支持 ie9+
可利用CSS實現動畫。
減少HTTP請求。
矢量，縮放不失真
可以很精細的控制SVG圖標的每一部分

綜上所述的一些特點，個人比較推薦使用symbol或者fontclass的方式

iconfont的三種使用方式

免責聲明！