项目场景:
vue3项目中。
element-push版本:
"element-plus": "^2.2.2"
当前版本的icon还没有默认在组件中,需要另外安装才能使用图标。
问题描述
虽然在vue3项目中引入了element-plus,但是不能使用icon图标,因为element-plus组件库目前没有包含icon组件。
解决方案:
安装icons-vue
# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
在main.ts中注册图标组件:
// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
相当于现在一个图标是一个组件,而不是原来的使用class来定义组件了,所以循环遍历ElementPlusIconsVue,将每个图标都作为组件注册到项目中。
当然如果你并不需要引入全部的图标,可以在需要的地方引入,而不是在main.ts中全局引入:
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
组件中使用(注意大小写):
<el-icon><location /></el-icon>