《ElementPlus 与 ElementUI 差异集合》icon 图标使用（包含：el-button，el-input和el-dropdown 差异对比）

安装

注意 ElementPlus 的 Icon 图标 要额外安装插件 @element-plus/icons-vue.

npm install @element-plus/icons-vue
1

注册

全局注册

定义一个文件 element-icon.js ，注意代码第 6 行。加上了前缀 ElIcon ，避免组件命名重复，且易于理解为 element-plus 的 icon。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

export const registerElIcon = (app) => {
    // 全局注册图标 ElIconXxxx
    for (let i in ElementPlusIconsVue) {
        let name = `ElIcon${i}`;
        app.component(name, ElementPlusIconsVue[i])
    }
}
1
2
3
4
5
6
7
8
9

main.js 中引入

import { registerElIcon } from './elements-icon.js'

// 全局注册 el-icon
registerElIcon(app);
1
2
3
4

局部注册

在组件内局部注册，这里使用