回顾一下上篇文章的内容，Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。。而Element Plus 抛弃了字体图标的用法，而直接使用了 svg 图标。
那么在Element Plus框架内使用阿里图标又该如何实现？本篇文章就是讲述Vue3+ElementPlus项目使用iconfont阿里图标的方法。
Vue3+ElementPlus项目使用iconfont阿里图标
- 1、封装通用组件
- 2、引入iconfont
- 3、使用
- （1）在main.js导入
- （2）在页面中使用
- 4、有坑填坑
默认大家已经下载安装配置好elementplus。不知道的盆友们请翻一下之前的文章，都介绍的很清楚。;指路：vuecli3引入Element-plus
Element Plus中的图标其实也是组件，我们也知道在Vue中可以直接在模板中使用<svg>标签来插入SVG图标代码。这就给我们提供了一个思路，将阿里图标也封装成一个通用组件，然后在vue3项目中导入注册，就像其他组件一样使用。
那么开始实战吧~~
1、封装通用组件
在components文件夹下新建一个iconfont文件夹，并在该文件夹下新建一个SvgIcon.vue
// 直接复制即可
<template>
<svg aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script setup>
import { computed } from 'vue'
// 父组件传入参数
const props = defineProps({
iconName: {
type: String,
required: true // 必须传入
},
})
// 图标在 iconfont 中的名字
const iconName = computed(()=>{
return `#${props.iconName}`
})
</script>
<style scoped>
</style>
elementplus的图标组件自身无css属性，所以为了保持统一也不设置。在上篇文章中，推荐图标组件与el-icon搭配使用，所以可以直接在el-icon上设置color和size属性来控制图标的大小和颜色。
2、引入iconfont
在asserts文件夹中新建一个iconfont文件夹，并在该文件夹下新建一个iconfont.js
选择需要的图标添加到我的项目中去，选择Symbol，打开链接，将内容复制到iconfont.js文件中去
3、使用
（1）在main.js导入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import SvgIcon from './components/iconfont/SvgIcon.vue'
import './assets/iconfont/iconfont.js'
const app = createApp(App)
app.use(router)
app.component('SvgIcon', SvgIcon)
app.mount('#app')
（2）在页面中使用
<template>
<el-icon size="12px" color="#ffbbcc">
// 传入图标名字
<SvgIcon iconName="icon-maogou"/>
</el-icon>
</template>
4、有坑填坑
使用后大家可能会发现在el-icon上设置color属性并不会改变图标的颜色。为什么呢？因为如果某一个图标的fill不为空，那么作为svg引用时将无法修改填充色。
那么该如何解决呢？有两种解决方法：
- （1）在iconfont.js文件中找到fill属性，并删除。
- （2）在官网中，将项目中的图标批量去色，然后更新iconfont.js
显然方法（2）更好，方法（1）要在一大坨代码中找，想想都要晕了~~
嘿嘿嘿，是不是很简单，觉得不错就给我点个赞吧~~
