全局引入Element-Plus的图标并将其改为el-icon-xxx的形式直接使用

1、安装和引入element-plus/icons

安装

npm install @element-plus/icons

引入
在main.ts文件夹中,

import * as Icons from '@element-plus/icons'
import {toLine} from "./utils/toLine";

// 全局注册图标 牺牲一点性能
// 以el-icon-xx为头
for (let i in Icons) {
    app.component(`el-icon-${toLine(i)}`,(Icons as any)[i])
}

其中toLine是封装的一个方法
创建一个utils文件夹下面再创建一个toLine.ts

在toline.ts中

// 把驼峰命名改为横线
export const toLine = (value: string) => {
    return value.replace(/(A-Z)g/,'-$1').toLocaleLowerCase()
}

最后在对应页面直接使用

<template>
  <div>
    <el-button type="success">首页</el-button>
    <el-icon-edit />
  </div>
</template>

结果