一、安装
# 选择一个你喜欢的包管理器
# 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>