Element Plus的el-icon如何用(element,plus,开发技术)

在 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

在 vue2 + Element UI 的用法

在 vue3 + Element Plus 的用法

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

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

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

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

下载 svg图标库 的命令：

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

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

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

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

安装命令：

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

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

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

main.js

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

在页面中使用

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

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

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

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

main.js

在页面中使用

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

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

局部引入的话，我们只需要引入 icon 对应的 css 即可。

如果你在 main.js 引入了 element-plus/dist/index.css 就不需要在页面再引入 element-plus/es/components/icon/style/css 。