Element Plus 团队表示正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃用，于是目标是对代码进行对应的更新，Font Icon换成SVG Icon。

        文档： Icon 图标 | Element Plus (element-plus.org)  (2021.10.12更新替换连接地址，element-plus文档网址变动了)

        注意：当前图标只适用于vue3。

        前排提示（2021.12.13更新）：根据element-plus@1.2.0-beta.6版本的更新日志，连接：更新日志 | Element Plus (gitee.io)。原@element-plus/icons（已废弃）改为@element-plus/icons-vue，所以本文依赖包使用2021.12.13时最新版本element-plus@1.2.0-beta.6和@element-plus/icons-vue@0.2.4，并且所有导入已修改，@element-plus/icons改为@element-plus/icons-vue即可。图标使用时如无显示，请注意命名格式、作为属性传输时是String还是Component类型。具体修改如下：

// 将 import * as ElIconModules from '@element-plus/icons' 修改为
import * as ElIconModules from '@element-plus/icons-vue'
// 将 import { Edit } from '@element-plus/icons' 修改为
import { Edit } from '@element-plus/icons-vue'

        首先更新 element-plus版本，指定安装@1.2.0-beta.6（2021.12.13时的最新版本）。安装图标包，npm install @element-plus/icons-vue（原先@element-plus/icons，现已废弃）。

npm install element-plus@1.2.0-beta.6
npm install @element-plus/icons-vue

        文档中表示，使用el-icon需要全局注册组件或者在要用到的组件中单独注册。看了一下源码，发现无统一导出，只能一个个注册。[ 已更新 el-icon 统一导入及注册方式，见最下方2021.10.12更新 ]

组件中注册：

//组件script
import { Edit,FolderOpened } from '@element-plus/icons-vue'

全局注册：

//main.js
import { Expand,ChatRound } from '@element-plus/icons-vue'

const app=createApp(App)
// 第一个参数传入的组件名即是之后调用时使用的组件名
// 此处组件名格式参照的时官方文档中icon部分的用例格式
app.component('expand',Expand)
   .component('chat-round',ChatRound)
app.mount('#app')

使用：

<!-- 组件template -->

<!-- 组件中注册，使用文件自带的组件名调用，单独作为组件使用时aa-bb和AaBb格式皆可 -->
<!-- 但注意作为Component属性传输时仅可用AaBb格式，详细使用情况见下方el-input中图标和component组件动态调用用例 -->
<el-icon :size='20'><Edit /></el-icon>
<folder-opened />
<FolderOpened />

<!-- 全局导入注册，需使用设置的组件名调用 -->
<el-icon :size='20'><expand /></el-icon>
<chat-round />

2021.10.12更新：el-icon 统一导入及注册方式

用 import * as 统一模块对象 from '路径' 方式导入，并使用 for in 循环注册。代码如下：

// main.js
// 统一导入el-icon图标
import * as ElIconModules from '@element-plus/icons-vue'
// 导入转换图标名称的函数
import { transElIconName } from './utils/utils.js'  
...
// 统一注册el-icon图标
for(let iconName in ElIconModules){
    app.component(transElIconName(iconName),ElIconModules[iconName])
}

// utils/utils.js
// 将el-icon的组件名称AbbbCddd转化为i-abbb-cddd形式
// 此前用switch做组件名时因关键字重复报错，所以格式统一加了前缀
// 例：Switch转换为i-switch，ArrowDownBold转换为i-arrow-down-bold
export function transElIconName(iconName){
    return 'i'+iconName.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase())
}

此命名格式对应的调用代码如下：

<el-icon :size='20'><i-edit /></el-icon>
<i-expand />

[注：此处原使用的是@element-plus/icons@0.0.11 （2021.10.12时的最新版本），现为0.2.4版本的@element-plus/icons-vue@0.2.4。]

2021.11.13更新：element-plus更新到1.2.0以上时，el-icon 在各带图标组件中的使用方法。

在element-plus 1.2.0 以下的版本，带图标组件使用的是Font Icon（element-plus官方文档上已经去除font icon相关内容，但可以参考对应vue2本版的element-ui文档，目前它使用的依然是font icon）；在element-plus 1.2.0以上版本带图标组件使用的则是SVG Icon。两者不兼容，更新到1.2.0以上版本时需参照官方说明进行代码更新。具体API变动见1.2.0-beta.1破坏性变动说明中的 '可扩展性 | scalability' 部分。链接如下：💥 1.2.0-beta.1 Breaking change · Discussion #4060 · element-plus/element-plus · GitHub 。

另外相关带图标组件的文档也已经更新成了SVG Icon的用法，以el-input组件为例，文档链接：Input 输入框 | Element Plus (element-plus.org) 。代码如下：

// 在vue文件中单独导入使用
// template中使用，需使用Component类型，并且仅可用AaBb式命名，单独调用图标组件时可用的aa-bb式命名不可用
<el-input :prefix-icon="Search" />
<el-input :suffix-icon="FolderOpened" />

// String类型无图标显示
<el-input prefix-icon="Search" />

// script中引入
import { Search,FolderOpened } from '@element-plus/icons-vue'

另外，如果使用上文2021.10.12更新的el-icon统一导入及注册方式，进行了图标导入及注册的话。则在vue文件template中根据组件注册时的命名格式调用即可。但经过测试，仅String类型可直接调用，Component类型无图标显示。

// 使用上文2021.10.12更新的el-icon统一导入及注册方式
// 在vue文件template中根据组件注册时的命名格式调用
// 但经过测试，仅String类型可直接调用
<el-input prefix-icon="i-search" />

// Component类型无图标显示
<el-input :suffix-icon="i-search" />

[注：此处原使用的element-plus版本为1.2.0-beta.3（2021.11.13时的最新版本），现为1.2.0-beta.6版本。]

2021.12.13更新：原依赖@element-plus/icons（已废弃）改为@element-plus/icons-vue，component组件动态加载图标。

根据element-plus@1.2.0-beta.6版本的更新日志，连接：更新日志 | Element Plus (gitee.io)。原@element-plus/icons（已废弃）改为@element-plus/icons-vue，所以本文依赖包使用2021.12.13时最新版本element-plus@1.2.0-beta.6和@element-plus/icons-vue@0.2.4，并且所有导入已修改，@element-plus/icons改为@element-plus/icons-vue即可。图标使用时如无显示，请注意命名格式、作为属性传输时是String还是Component类型。

另外，使用component组件动态加载图标，代码如下：

// 单独导入的用Component类型（String类型无显示），并且仅可用AaBb式命名，单独调用图标组件时可用的aa-bb式命名不可用
<el-icon :size='20'><component :is="Edit"></component></el-icon>

// 统一导入自定义命名的用String类型（Component类型无显示）
<el-icon :size='20'><component is="i-search"></component></el-icon>

by 莫得感情学习机1号

2021.8.5