如果你想要在项目中直接使用 Element Plus 的图标 icons,而不需要在每次使用的时候都要引入,那么你可以参考本文。
1、图标下载
在使用 Element Plus 的图标前,需要先下载图标库。
npm
$ npm install @element-plus/icons-vue
yarn
$ yarn add @element-plus/icons-vue
pnpm
$ pnpm install @element-plus/icons-vue
2、全局引入
在 main.js 中引入。
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
//图标库
import * as ElementPlusIcons from '@element-plus/icons-vue'
const app = createApp(App)
// 把图标引入到全局,这里注意引入的顺序,不然会报错。可以把它写在 createApp(App) 与 app.mount('#app') 之间。
for (const [key, component] of Object.entries(ElementPlusIcons)) {
app.component(key, component)
}
app.use(store)
.use(router)
.mount('#app')
现在就可以在项目里面使用它了。
好记性不如烂笔头,在学习的路上留下的痕迹。希望能给大家带来帮助,也期待您的点赞评论。如有不足之处,还请斧正。