踩坑日记1- element-plus el-icon 最新使用指南

element-plus el-icon 最新使用指南

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

    文档： Icon 图标 | Element Plus (element-plus.org)  (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)
app.component('expand',Expand)
app.mount('#app')

使用：

<!-- 组件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){
    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())
}

在TS类型检测时推导报错
元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型

解决办法：
在 tsconfig.json 配置文件里加上 “suppressImplicitAnyIndexErrors”:true