Vue3使用ElementPlus的图标icon

项目场景：

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>