通用组件封装——iconfont 封装图标组件

---

背景

在项目中会使用到大量的图标，而 element 等组件库现有的 icon 图标可能无法满足项目的需要，比如很多图标没有可以替代的，或者项目中有彩色图标的需求都无法满足，所以引入 iconfont 图标库来实现。

iconfont 图标使用方式参考 官网 ，本篇文章不重复介绍如何使用，重点介绍在项目中如何 font-class 引用方式封装一个通用的图标组件。

---

一、iconfont 处理

1. 一键添加入库功能

在 iconfont 中有很多用户自定义上传的图标库，如果想把整个当前图标库中展示的图标添加到自己的项目中，需要先把图标添加到购物车，然后从购物车添加到项目。

但是在添加到购物车的时候，只能点击挨个图标的添加入库按钮，当图标很多的时候还是比较繁琐，可以直接使用下方的 js 脚本在页面的控制台中直接执行，就可实现简单的一键入库。

// 获取页面中所有 title="添加入库" 且父元素 class="icon-cover" 的按钮
const elements = document.querySelectorAll('.icon-cover [title="添加入库"]');
// 触发每个按钮的点击事件
elements.forEach(e => e.click());

2. 图标项目配置

1. 新建项目，点击购物车中的添加到项目按钮，选择刚才新建的项目全部添加

2. 点击项目设置，修改 FontClass 前缀设置统一图标前缀，然后修改字体格式为 svg
   

3. 如果图标库中有部分图标已经配有颜色，但是在项目中使用的时候不想要这个颜色，希望颜色在代码中自己定义，就可执行批量去色的操作，然后在代码中通过 style 属性进行自定义
   

4. 单个图标如果不合适，可以自定义，比如修改图标方向、大小、颜色、class 名称等
   

5. 点击项目选择 Font Class 格式，然后把项目下到本地

二、代码实现

1. 把下载的压缩包中的 iconfont.js 引入到项目中，放到 /public/fonts 目录下
2. 封装全局通用的图标组件库，此处兼容了项目中也会用到 element 的图标

<template>
  <i v-if="name.startsWith('el-')" :class="['test-icon', name]" :style="svgStyle"></i>
  <svg v-else class="test-icon" aria-hidden="true" :style="svgStyle">
    <use :xlink:href="`#test-${name}`"></use>
  </svg>
</template>

<script>
import '/public/fonts/iconfont'

export default {
  name: 'GlobalIcon',
  props: {
    name: {
      type: String,
      required: true
    },
    size: {
      type: [String, Number],
      default: ''
    },
    color: {
      type: String,
      default: ''
    }
  },
  computed: {
    svgStyle() {
      let style = {}
      if (this.size) {
        let size = String(this.size)
        if (size.indexOf('px') < 0) size += 'px'
        style.width = size
        style.height = size
      }
      if (this.color) {
        style.color = this.color
        style.fill = this.color
      }
      return style
    }
  }
}
</script>

<style lang="scss" scoped>
.test-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  overflow: hidden;
  vertical-align: sub;
  padding-right: 8px;
}
</style>

注意：<use :xlink:href="#test-${name}"></use> 中 href 中的前缀 test- 是对应项目设置中的 Font Class/Symbol 前缀

3. 使用时只需传入 size，name 等参数给组件即可

<GlobalIcon name="test-add" :size="20" />