导航：首页 > 开发技术 >

Element Plus的el-icon如何用

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，这篇文章主要介绍"Element Plus的el-icon如何用"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"Element Plus的el-icon如何用"

千家信息网最后更新 2026年11月03日Element Plus的el-icon如何用

这篇文章主要介绍"Element Plus的el-icon如何用"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"Element Plus的el-icon如何用"文章能帮助大家解决问题。

在 Vue 生态里， Element UI 是排名前列的组件库。在 Vue 发布到 3.0 时，Element 也发布了对应的组件库。也就是 Element Plus 。随之而来的用法也跟着变了。

比如本文要讲的 el-icon 的用法。

在 Element Plus 里，Icon 图标 的用法和以前不一样了。虽然官方文档也有说明怎么用，但不是非常详细，可能会给新手带来一丢丢障碍。

本文将花几分钟的时间讲解 el-icon 几种用法和注意事项。

注意：需要留意本文发表时间与使用的 Element Plus 版本，随着时间的推移可能会出现使用上的差异。

vue: ^3.2.25
element-plus: ^2.1.7
@element-plus/icons-vue: ^1.1.4

初步了解

Icon 在 Element UI 和 Element Plus 用法上的差别

在 vue2 + Element UI 的用法

在 vue3 + Element Plus 的用法

个人觉得，Element UI 的用法会更加简单。

下一篇文章我会讲解如何在 Element Plus 的基础上二次封装出一个更好用的 Icon组件 。

Icon 在 Element Plus 中的使用逻辑

Element Plus 抛弃了字体图标的用法，直接使用了 svg 的方式。

可以说，图标这个东西被拎出来单独维护了。所以在使用前必须把 svg图标库 下载下来。

下载 svg图标库 的命令：

npm install @element-plus/icons-vue

你也可以使用 Yarn 或 pnpm 的方式下载

# Yarnyarn add @element-plus/icons-vue# pnpmpnpm install @element-plus/icons-vue

使用的方式有2种，一种是直接使用 svg，另一种是配合 el-icon 标签一起使用。

接下来就分别讲讲这两种使用方式（全局和局部引入都会讲到）

只使用 svg

如果你只需使用 Element Plus 提供的 svg图标库 的话，是可以不安装 Element Plus 的。不过这种场景应该很少出现。

安装命令：

npm install @element-plus/icons-vue

Element Plus 提供的 svg图标 种类可以到图标集合里查看。

通过 svg组件 的方式使用图标，如需设置图标大小和颜色，都需要通过 css 来设置。

全局引入

全部引入的方式会将所有 svg组件 都注册到全局，用的时候比较方便，但会牺牲一点性能。

main.js

import { createApp } from 'vue'import App from './App.vue'import * as Icons from '@element-plus/icons-vue' // 引入所有图标，并命名为 Iconsconst app = createApp(App)// 通过遍历的方式注册所有 svg组件，会牺牲一点点性能for (let i in Icons) {  app.component(i, Icons[i])}app.mount('#app')

如果你不想全部引入，只是想在全局注册某个 svg图标组件，可以用以下方式在 main.js 里注册（我以 Edit 图标为例）

/* 省略部分代码 */import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标const app = createApp(App)app.component(Edit.name, Edit) // 全局注册 Edit 图标app.mount('#app')

在页面中使用

局部引入

局部引入的方式只需在使用的地方引入即可。

配合 el-icon 一起使用

Element Plus 还提供了 el-icon 组件用来包裹 svg图标组件 ，使得设置图标大小和颜色更加方便。

但需要在项目中安装 Element Plus ，安装命令如下：

# 选择其中一种方式安装即可。# NPMnpm install element-plus --save# Yarnyarn add element-plus# pnpmpnpm install element-plus

安装完 Element Plus 后，可以在全局引入，也可以局部引入。

全局引入

main.js

import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标import App from './App.vue'const app = createApp(App)app.component(Edit.name, Edit) // 全局注册 Edit 图标app.use(ElementPlus).mount('#app')

在页面中使用

此时，在 el-icon 上设置 size 和 color 就能控制 svg图标 的大小和颜色。

需要注意的是 size 属性必须传数字，不能传字符串进去！