vue3 Element Plus Icon 图标使用 全部导入 / 按需导入

没有安装 element-plus/icons 的，安装命令如下：

npm install @element-plus/icons-vue

一.  全部引入

main.js 挂载: 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入 路由
import store from './store' // 导入 vuex
import ElementPlus from 'element-plus' // 导入Element Plus 
import 'element-plus/theme-chalk/index.css' // 导入Element Plus css
// 导入 icon
import * as ElIconList from '@element-plus/icons-vue'
const app = createApp(App).use(router).use(store).use(ElementPlus)
// 注册icon
for (const name in ElIconList) {
  app.component(name, ElIconList[name])
}
app.mount('#app')

使用 eg: 

<el-button icon="Rank" />

 

展示效果：

二.  按需引入

main.js 挂载

 

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router' // 导入 路由
  import store from './store' // 导入 vuex
  import 'lib-flexible/flexible.js'import ElementPlus from 'element-plus' // 导入Element Plus
  import 'element-plus/theme-chalk/index.css' // 导入Element Plus css
  createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

使用

<template>
<el-icon size="34"><Rank /></el-icon>
></template>

<script setup>


import { Rank } from "@element-plus/icons-vue"


</script>