el-icon 最新使用指南 SVG Icon @element-plus/icons-vue vue3 统一导入及注册el-icon组件在各带图标组件中使用 component组件动态加载图标

最新推荐文章于 2025-10-11 15:48:49 发布

原创

最新推荐文章于 2025-10-11 15:48:49 发布 · 置顶 · 4.2w 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue #vue.js #javascript

本文档详细介绍了如何将Element Plus的FontIcon迁移到SVGIcon，包括更新依赖、注册组件、使用新图标的方式等。涉及内容包括组件中和全局注册SVGIcon，以及在不同版本的Element Plus中带图标组件的使用方法。同时提供了统一导入及注册el-icon的代码示例，以及使用component组件动态加载图标的示例。

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' 修