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.使用

<template>
  <div class="app">
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
  </div>
</template>

5.效果 

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