vue中手動封裝iconfont組件解析(三種引用方式的封裝和使用)

更新時間：2022年09月08日 11:00:05 作者：艾歡歡

這篇文章主要介紹了vue中手動封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

準(zhǔn)備

將項目內(nèi)的圖標(biāo)下載至本地

在了路徑 src/assets 下新建文件夾 iconfont ，用來存放字體圖標(biāo)的本地文件

解壓下載到本地的字體圖標(biāo)文件，放到 iconfont 文件夾下

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

npm install css-loader -D

封裝

unicode引用封裝

<template>
  <div>
    <span class="iconfont" v-html="name"></span>
    <slot></slot>
  </div>
</template>

 
<script>
export default {
  name: 'iconUnicode',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</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: {
? ? name: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? computed: {
? ? iconTag() {
? ? ? return `icon-${this.name}`;
? ? }
? }
};
</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" rel="external nofollow" ></use>
? ? </svg>
? ? <slot></slot>
? </div>
</template>

<script>
import "../assets/iconfont/iconfont.js";
export default {
? name: "iconSymbol",
? props: {
? ? name: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? computed: {
? ? iconTag() {
? ? ? return `#icon-${this.name}`;
? ? }
? }
};
</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 name="fanhuidingbu">Symbol</i-symbol>
    <i-font name="fanhuidingbu">Font class</i-font>
    <i-unicode name="&#xe633;" style="font-size:30px;color:#333">Unicode</i-unicode>
  </div>
</template>

效果圖：