iconfont的三種使用方式詳解

更新時(shí)間：2018年08月05日 16:40:04 作者：花落微涼夢(mèng)清幽

這篇文章主要介紹了iconfont的三種使用方式,需要的朋友可以參考下

在我們項(xiàng)目中經(jīng)常要使用到iconfont，在此我們使用阿里巴巴矢量庫提供的icon圖標(biāo)，此圖標(biāo)庫足夠?yàn)槲覀兲峁┐罅康膱D標(biāo)，我們首先需要的事在阿里巴巴矢量圖標(biāo)庫新建一個(gè)自己的賬號(hào)，并且新建一個(gè)項(xiàng)目，這個(gè)項(xiàng)目包含了你所有要用到的圖標(biāo)。我們需要選中需要的圖標(biāo)放到自己的項(xiàng)目中，并下載下來放到自己項(xiàng)目下的iconfont文件夾之下。（需要更新圖標(biāo)時(shí)，下載包也需要重新下載更新）

方式一：使用symbol方式（本質(zhì)是用svg標(biāo)簽構(gòu)成的）

第一步：為了代碼更好的復(fù)用，我們封裝一個(gè)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}` // 注意：因?yàn)榇颂幗壎ǖ膕vgClass名已經(jīng)包含#icon，所以復(fù)制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中引入

import '@/assets/icons/iconfont.js' //symbol方式的相關(guān)文件
import '@/assets/icons/iconfont.css' // Unicode和fontclass方式的樣式包
import SvgIcon from '@/components/SvgIcon' // 使用icon組件
Vue.component('svg-icon', SvgIcon) // 引入全局組件，也可以在局部引入

第三步：使用

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

<template>
 <div>
 <!--方式一：使用svg-->
 <svg-icon class="h1" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
 <svg-icon class="h1" icon-class="hekriconshebeidengpao"></svg-icon>
 <!--方式二：使用unicode-->
 <i class="iconfont unicode">&#xe695;</i>
 <i class="iconfont unicode">&#xe63d;</i>
 <!--方式三：使用iconfontclass-->
 <span class="iconfont icon-baojingliebiao classicon"></span>
 </div>
</template>
<script>
// import '@/assets/icons/iconfont.css'
</script>
<style>
  .h1{
 width:50px;
 height:50px;
 font-size: 100px;
 }
 .unicode{
 font-size: 30px;
 }
 .classicon{
  /* 可以自定義icon的顏色與大小 */
 font-size: 100px; 
 color:red;
 }
</style>

另外兩種使用方式是使用unicode和fontclass方式，如上面的代碼所示引入與使用

然后我們談?wù)勥@三種方式的優(yōu)缺點(diǎn)吧

unicode：

優(yōu)點(diǎn)：

兼容性最好，支持ie6+
支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等

缺點(diǎn)：

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

fontclass：