vue3 全局注册图标

1.安装包

npm install @element-plus/icons-vue

2.在main.ts引入

import * as Icons from "@element-plus/icons-vue"

3.在main.ts中,全局注册图标

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from "pinia";
//引入
import * as Icons from "@element-plus/icons-vue"
const pinia = createPinia();
const app=createApp(App)
// 全局注册图标,牺牲一点性能
for (const name in Icons){
    app.component(name,(Icons as any)[name])
}

app.use(router).use(ElementPlus).use(pinia).mount('#app')

4.使用

5.效果 

vue3 全局注册图标_第1张图片

 以上就实现了全局注册图标

你可能感兴趣的:(vue,前端,javascript,vue.js)