最新版本的Element Plus已经移除了Font icon，以下引入以及使用方法为亲测可用的，但是不知道后续是否还会改变，大家可以借鉴一下。
本人使用版本
"element-plus": "^1.3.0-beta.1",
"@element-plus/icons-vue": "^0.2.6",
"typescript": "~4.1.5"
1.安装
# Choose a package manager you like.# NPM$ npm install @element-plus/icons-vue# Yarn$ yarn add @element-plus/icons-vue# pnpm$ pnpm install @element-plus/icons-vue
2.使用
基本使用方法官方文档写的很清楚，不再赘述，以下只做动态组件使用说明
需要在main.ts中统一导入
import * as ElIconModules from '@element-plus/icons-vue'// 统一注册Icon图标for (const iconName in ElIconModules) {if (Reflect.has(ElIconModules, iconName)) {const item = ElIconModules[iconName]ponent(iconName, item)}}
如果你使用的是ts，当数组下标为字符串时，会报错。，在ElIconModules[iconName]这里还会报错，解决方法是需要在ts.config.json中加入以下代码，看注释处
{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","importHelpers": true,"moduleResolution": "node","skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"sourceMap": true,"baseUrl": ".","types": ["webpack-env"],"paths": {"@/*": ["src/*"]},"suppressImplicitAnyIndexErrors": true, //加入这段代码解决main.ts报错问题"lib": ["esnext", "dom", "dom.iterable", "scripthost"]},"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude": ["node_modules"]}
完成以上即可完成全局的图标注册
3.动态组件使用方法
<el-icon :size="30"><componentclass="fold-menu":is="iconName"@click="handleFoldClick"></component></el-icon>
在写项目时有一个需求是点击图标要进行图标切换，以往都是使用动态class的方式，但是现在因为Element Plus移除了iconfont，所以需要使用动态组件，下面上完整代码，一看便知，直接复制也可实现
<template><div class="nav-header"><el-icon :size="30"><componentclass="fold-menu":is="iconName"@click="handleFoldClick"></component></el-icon></div></template><script lang="ts">import { defineComponent, ref } from 'vue'export default defineComponent({emits: ['foldChange'], //子传父setup(props, { emit }) {let iconName = ref('Fold')const isFold = ref(false)// 这里是点击图标可以进行切换，自己想的实现方法，可能不太好，但是功能实现了const handleFoldClick = () => {isFold.value = !isFold.valueif (isFold.value == false) {iconName.value = 'Expand'} else {iconName.value = 'Fold'}emit('foldChange', isFold.value)}return {iconName,handleFoldClick,isFold}}})</script><style scoped lang="less">.fold-menu {cursor: pointer;}</style>
本人也是菜鸟，也是东拼西凑加上自己实践，希望能帮到各位吧，马上过年了，祝各位程序猿新年快乐，万事胜意~
