Element plus 图标使用

使用vue3引入Element plus，使用icon时发现没有正常渲染到页面上。到官网查看后发现，如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。

单个图标引入

你可以在单个组件中像下面的方式引入：

全局注册为组件

但是每次都这样做显然过于繁琐，我们可以使用下面的方式把icon全局注册为组件：

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'

import App from './App.vue'

const app = createApp(App)

// 统一注册Icon图标
for (const iconName in ElIcons) {
    app.component(iconName, ElIcons[iconName])
}

app.mount('#app')

这样使用就方便多了。