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

未知 02-07 3537

????????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')

使用：

<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