踩坑⽇记1-element-plusel-icon最新使⽤指南
element-plus el-icon 最新使⽤指南
Element Plus 团队表⽰正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃⽤，于是⽬标是对代码进⾏对应的更新，Font Icon换成SVG Icon。
⽂档： Icon 图标 | Element Plus ()  (2021.10.12更新替换连接地址，element-plus⽂档⽹址变动了)
注意：当前图标只适⽤于vue3。
⾸先更新 element-plus版本，指定安装@1.0.2-beta.69（2021.8.5时的最新版本）。安装图标包，npm install @element-plus/icons。
npm install element-plus@1.0.2-beta.69
npm install @element-plus/icons
⽂档中表⽰，使⽤el-icon需要全局注册组件或者在要⽤到的组件中单独注册。看了⼀下源码，发现⽆统⼀导出，只能⼀个个注册。[ 已更新el-icon 统⼀导⼊及注册⽅式，见最下⽅2021.10.12更新 ]
//组件script
import{ Fold }from'@element-plus/icons'
import{ Edit }from'@element-plus/icons'
export default{
components:{
Fold,
Edit
}
}
全局注册：
//main.js
import{ Expand }from'@element-plus/icons'
const app=createApp(App)
appponent('expand',Expand)
使⽤：
<!-- 组件template -->
<!-- 来⾃⽂档中代码段，可⽤ -->
<el-icon :size='20'><edit /></el-icon>
<expand />
另外，使⽤el-svg-icon会报错，：
<!-- 组件template -->
<!-- 来⾃⽂档中点击SVG图标⾃动复制的内容，会报错 -->
<el-svg-icon><fold /></el-svg-icon>
错误：Failed to resolve component: el-svg-icon，于是去代码中查，未到以el-svg-icon命名或内含此字段的相关⽂件。暂不理会。
2021.10.12更新：el-icon 统⼀导⼊及注册⽅式
⽤ import * as 统⼀模块对象 from ‘路径’ ⽅式导⼊ ，并使⽤ for in 循环注册。代码如下：
// main.js
// 统⼀导⼊el-icon图标
import*as ElIconModules from'@element-plus/icons'
// 导⼊转换图标名称的函数
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())
}
在TS类型检测时推导报错
元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能⽤于索引类型
icon图标库
解决办法：
在 tsconfig.json 配置⽂件⾥加上 “suppressImplicitAnyIndexErrors”:true

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