如何正確的使用iconfont

這期內容當中小編將會給大家帶來有關如何正確的使用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中引入

import '@/assets/icons/iconfont.js' //symbol方式的相關文件
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方式，如上面的代碼所示引入與使用

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

unicode：

優點：

• 兼容性最好，支持ie6+

• 支持按字體的方式去動態調整圖標大小，顏色等等
  

缺點：

• 不支持多色圖標

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

• 不直觀，看unicode碼很難分辨什么圖標
  

fontclass：

• 兼容性良好，支持ie8+

• 相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
  

symbol：

• 支持多色圖標了，不再受單色限制。

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

• 支持 ie9+

• 可利用CSS實現動畫。

• 減少HTTP請求。

• 矢量，縮放不失真
  

• 可以很精細的控制SVG圖標的每一部分

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