博客

背景：今日在使用elementui图标时，图标只能单个引用，无法一次引用。

版本：vue3.x + elementui2.15.6 + @element-plus/icons-vue0.2.4

1，安装：

# NPM
$ npm install @element-plus/icons-vue

2， 引用。

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIconModules from '@element-plus/icons-vue'
import {Avatar,Unlock} from '@element-plus/icons-vue'

const app = createApp(App);
//单个图标引用
// app.component('Avatar',Avatar)

app.use(store).use(router)

app.use(ElementPlus,{ size: 'small', zIndex: 3000 })

globalIconComponentHandle(ElIconModules)

app.mount('#app')

/**添加全局图标 */
function globalIconComponentHandle(icons: any){
    for(const iconName in icons){
        app.component(iconName,icons[iconName])
    }
}