--- theme: smartblue --- 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，[点击查看活动详情](https://juejin.cn/post/7080800226365145118)。 # 本文简介 **点赞 + 关注 + 收藏 = 学会了**
在 `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` 的用法** ```html ```
**在 `vue3 + Element Plus` 的用法** ```html ```
个人觉得，`Element UI` 的用法会更加简单。下一篇文章我会讲解如何在 `Element Plus` 的基础上二次封装出一个更好用的 `Icon组件` 。
## Icon 在 Element Plus 中的使用逻辑 `Element Plus` 抛弃了字体图标的用法，直接使用了 `svg` 的方式。可以说，图标这个东西被拎出来单独维护了。所以在使用前必须把 **svg图标库** 下载下来。下载 **svg图标库** 的命令： ```bash npm install @element-plus/icons-vue ``` 你也可以使用 `Yarn` 或 `pnpm` 的方式下载 ```bash # Yarn yarn add @element-plus/icons-vue # pnpm pnpm install @element-plus/icons-vue ```
使用的方式有2种，一种是直接使用 `svg`，另一种是配合 `el-icon` 标签一起使用。接下来就分别讲讲这两种使用方式（全局和局部引入都会讲到）

# 只使用 svg 如果你只需使用 `Element Plus` 提供的 **svg图标库** 的话，是可以不安装 `Element Plus` 的。不过这种场景应该很少出现。安装命令： ```bash npm install @element-plus/icons-vue ```
`Element Plus` 提供的 `svg图标` 种类可以到 [图标集合](https://element-plus.org/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88) 里查看。
通过 **svg组件** 的方式使用图标，如需设置图标大小和颜色，都需要通过 `css` 来设置。
## 全局引入全部引入的方式会将所有 **svg组件** 都注册到全局，用的时候比较方便，但会牺牲一点性能。 **main.js** ```js import { createApp } from 'vue' import App from './App.vue' import * as Icons from '@element-plus/icons-vue' // 引入所有图标，并命名为 Icons const app = createApp(App) // 通过遍历的方式注册所有 svg组件，会牺牲一点点性能 for (let i in Icons) { app.component(i, Icons[i]) } app.mount('#app') ```
如果你不想全部引入，只是想在全局注册某个 **svg图标组件**，可以用以下方式在 `main.js` 里注册（我以 `Edit` 图标为例） ```js /* 省略部分代码 */ import { Edit } from '@element-plus/icons-vue' // 引入 Edit 图标 const app = createApp(App) app.component(Edit.name, Edit) // 全局注册 Edit 图标 app.mount('#app') ```
**在页面中使用** ```html ``` ![01.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4075ab1c49f4018bac07a7994bd4da8~tplv-k3u1fbpfcp-watermark.image?)
## 局部引入局部引入的方式只需在使用的地方引入即可。 ```html ```

# 配合 el-icon 一起使用 `Element Plus` 还提供了 `el-icon` 组件用来包裹 `svg图标组件` ，使得设置图标大小和颜色更加方便。但需要在项目中安装 `Element Plus` ，安装命令如下： ```bash # 选择其中一种方式安装即可。 # NPM npm install element-plus --save # Yarn yarn add element-plus # pnpm pnpm install element-plus ```
安装完 `Element Plus` 后，可以在全局引入，也可以局部引入。
## 全局引入 **main.js** ```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') ```
**在页面中使用** ```html ``` ![03.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc272a68a36a40deb2693b62af7981a9~tplv-k3u1fbpfcp-watermark.image?) 此时，在 `el-icon` 上设置 `size` 和 `color` 就能控制 **svg图标** 的大小和颜色。 **需要注意的是 `size` 属性必须传数字，不能传字符串进去！**
## 局部引入 ```html ``` 局部引入的话，我们只需要引入 `icon` 对应的 `css` 即可。如果你在 `main.js` 引入了 `element-plus/dist/index.css` 就不需要在页面再引入 `element-plus/es/components/icon/style/css` 。

# 推荐阅读 👍[《Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）》](https://juejin.cn/post/6988808776291713060) 👍[《Vue3 过10种组件通讯方式》](https://juejin.cn/post/7069251532339806238) 👍[《这18个网站能让你的页面背景炫酷起来》](https://juejin.cn/post/7044397764368662559)

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3lw1xadqlveow