vue中手動封裝iconfont組件（三種引用方式的封裝和使用）

在線使用 有時候會因網絡問題影響用戶體驗；直接放在 本地使用 ，如果過多使用也會顯得繁瑣，所以就可以將其封裝成一個組件，也方便維護。
​
封裝基於阿里巴巴圖標庫的項目圖標。
​
初次使用iconfont項目參考： 點我查看使用前的準備和三種引用方式介紹

準備

1. 將項目內的圖標下載至本地

2. 在了路徑 src/assets 下新建文件夾 iconfont ，用來存放字體圖標的本地文件
3. 解壓下載到本地的字體圖標文件，放到 iconfont 文件夾下

4. 如過項目中沒有下載 css-loader 依賴包，就進行下載，否則會報錯

   npm install css-loader -D

封裝

unicode引用封裝

<template>
  <div>
    <span class="iconfont" v-html="iconTag"></span>
    <slot></slot>
  </div>
</template>
   
<script>
export default {
  name: "iconUnicode",
  props: {
    iconType: {
      type: String,
      required: true
    }
  },
  computed: {
    iconTag() {
      return `&#${this.iconType};`;
    }
  }
};
</script>

<style scoped>
@font-face {
  /* Unicode  */
  font-family: "iconfont";
  src: url("../assets/iconfont/iconfont.eot");
  src: url("../assets/iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
    url("../assets/iconfont/iconfont.woff2") format("woff2"),
    url("../assets/iconfont/iconfont.woff") format("woff"),
    url("../assets/iconfont/iconfont.ttf") format("truetype"),
    url("../assets/iconfont/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 2em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

font-class引用封裝

<template>
  <div>
    <span class="iconfont" :class="iconTag"></span>
    <slot></slot>
  </div>
</template>
   
<script>
import "../assets/iconfont/iconfont.css";
export default {
  name: "iconFontClass",
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconTag() {
      return `icon-${this.iconClass}`;
    }
  }
};
</script>

<style scoped>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 2em;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

symbol引用封裝

<template>
  <div>
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconTag"></use>
    </svg>
    <slot></slot>
  </div>
</template>
   
<script>
import "../assets/iconfont/iconfont.js";
export default {
  name: "iconSymbol",
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconTag() {
      return `#icon-${this.iconClass}`;
    }
  }
};
</script>

<style scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

引入

全局引入

// main.js

// 引入並註冊全局組件
import iconUnicode from './ui/iconUnicode'
Vue.component('iUnicode',iconUnicode)

局部引入

// 局部引入並使用
import iSymbol from "../ui/iconSymbol"
import iFont from "../ui/iconFontClass"

export default {
   //註冊
  components: {
    iSymbol,
    iFont
  }
};

使用

<template>
  <div class="box">
    <i-symbol icon-class="fanhuidingbu">Symbol</i-symbol>
    <i-font icon-class="fanhuidingbu">Font class</i-font>
    <i-unicode icon-type='xe633' style="font-size:30px;color:#333">Unicode</i-unicode>
  </div>
</template>

效果圖：

最後

也可以通過在線鏈接進行封裝，但不管是在線使用還是本地使用，每次在項目中添加新圖標之後都要更新一下 本地iconfont文件 或者 在線鏈接 。

demo 已上傳 GitHub