【已解决】Vue3+Element-plus中icon图标不显示的问题

---

前言

今天博主正在学习Springboot+Vue的后台管理项目，对着B站的教程视频在模仿着敲，发现和up主的代码一样但是图标 不 显 示！

在摸索了近半个小时之后，发现新版的Element Plus在进行图标引入时需要按需引入

---

一、官网

官网：https://element-plus.gitee.io/zh-CN/
图标教程：https://element-plus.gitee.io/zh-CN/component/icon.html

---

二、步骤

前面的安装以及注册所有图标在这里就不多描述了，直接放上代码

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

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

// main.js

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

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

---

在这里以Edit和Avatar图标为例

1.图标按需引入

import { Edit,Avatar} from '@element-plus/icons-vue'
export default {
  name: "页面名",
  components: {
    Avatar,
    Edit,
  }
}

---

2.在页面上使用

第一种是可以使用el-icon标签引入图标，同时可以对图标进行样式上的设计

<!-- Use el-icon to provide attributes to SVG icon -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
  </div>
</template>

---

第二种是直接使用icon的名字进行SVG图标的引入

    <!-- Or use it independently without derive attributes from parent -->
    <Edit />

 <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />

---

效果图