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="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: