Vue3 第十篇：使用ElementPlus图标

Element Plus 提供了一套常用的图标集合。

1.安装

yarn add @element-plus/icons-vue

2.全局注册main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import 'virtual:windi.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App)

// 全局注册el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(router).use(pinia).use(ElementPlus,{locale: zhCn,}).mount('#app')

3.使用

const AboutMenu = () => {
    return (
        <>
            <el-icon><Fold /></el-icon>
        </>
    )