el-icon最新使⽤指南SVGIcon@element-plusicons-vuevue。
。。
Element Plus 团队表⽰正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃⽤，于是⽬标是对代码进⾏对应的更新，Font Icon换成SVG Icon。
⽂档：  (2021.10.12更新替换连接地址，element-plus⽂档⽹址变动了)
注意：当前图标只适⽤于vue3。
前排提⽰（2021.12.13更新）：根据element-plus@1.2.0-beta.6版本的更新⽇志，连接：。原@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部分的⽤例格式
appponent('expand',Expand)
icon图标库ponent('chat-round',ChatRound)
使⽤：
<!-- 组件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){
appponent(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'+place(/[A-Z]/g,(match)=>'-'+LowerCase())
}
此命名格式对应的调⽤代码如下：
<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' 部分。链接如下： 。
另外相关带图标组件的⽂档也已经更新成了SVG Icon的⽤法，以el-input组件为例，⽂档链接： 。代码如下：
// 在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/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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。