如何正確的使用iconfont

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何正確的使用iconfont，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

第一步：為了代碼更好的復(fù)用，我們封裝一個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名已經(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="h2" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
 <svg-icon class="h2" 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>
  .h2{
 width:50px;
 height:50px;
 font-size: 100px;
 }
 .unicode{
 font-size: 30px;
 }
 .classicon{
  /* 可以自定義icon的顏色與大小 */
 font-size: 100px; 
 color:red;
 }
</style>

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

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

unicode：

優(yōu)點：

• 兼容性最好，支持ie6+

• 支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小，顏色等等
  

缺點：

• 不支持多色圖標(biāo)

• 在不同的設(shè)備瀏覽器字體的渲染會略有差別，在不同的瀏覽器或系統(tǒng)中對文字的渲染不同，其顯示的位置和大小可能會受到font-size、line-height、word-spacing等CSS屬性的影響，而且這種影響調(diào)整起來較為困難

• 不直觀，看unicode碼很難分辨什么圖標(biāo)
  

fontclass：

• 兼容性良好，支持ie8+

• 相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個icon是什么。
  

symbol：

• 支持多色圖標(biāo)了，不再受單色限制。

• 支持像字體那樣通過font-size,color來調(diào)整樣式。

• 支持 ie9+

• 可利用CSS實現(xiàn)動畫。

• 減少HTTP請求。

• 矢量，縮放不失真
  

• 可以很精細(xì)的控制SVG圖標(biāo)的每一部分

上述就是小編為大家分享的如何正確的使用iconfont了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。