Vue3引入Element-Plus的Icon

一、安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

二、检查package.json是否安装成功

"dependencies": {
    "@element-plus/icons-vue": "^2.0.9"
  },

三、 在main.js中全局注册（TS和JS）

1、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)
}

 2、JS

如果你main.js里面，默认是这样的语句，我们需要将它先拆分出来，app单独声明：

createApp(App).use(store).use(router).mount('#app')

拆分后： 

const app = createApp(App)

app.use(store).use(router).mount('#app')

引入依赖：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

全局注册

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

四、使用方式

 Element-Plus找到你想要的icon图标，点击复制就行了

<el-icon><Female /></el-icon>
<el-icon><Male /></el-icon>