Element Plus 的 el
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
本文简介
点赞 + 关注 + 收藏 = 学会了
在 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 的用法
<i class="el-icon-edit"></i>
在 vue3 + Element Plus 的用法
<ElIcon :size="30" color="hotpink"> <edit /> </ElIcon> <!-- 也可以直接使用图标标签，无需父标签包裹 --> <edit />
个人觉得，Element UI 的用法会更加简单。
下一篇文章我会讲解如何在 Element Plus 的基础上二次封装出一个更好用的 Icon组件 。
Icon 在 Element Plus 中的使用逻辑
Element Plus 抛弃了字体图标的用法，直接使用了 svg 的方式。
可以说，图标这个东西被拎出来单独维护了。所以在使用前必须把 svg图标库 下载下来。
下载 svg图标库 的命令：
npm install @element-plus/icons-vue
你也可以使用 Yarn 或 pnpm 的方式下载
# Yarn yarn add @element-plus/icons-vue # pnpm pnpm 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' // 引入所有图标，并命名为 Icons const 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')
在页面中使用
<template> <div> <edit /> </div> </template> <style> svg { width: 40px; height: 40px; color: red; } </style>
局部引入
局部引入的方式只需在使用的地方引入即可。
<template> <div> <edit /> </div> </template> <script setup> import { Edit } from '@element-plus/icons-vue' // 引入 Edit 这个 svg组件 </script> <style> svg { width: 40px; height: 40px; color: red; } </style>
配合 el-icon 一起使用
Element Plus 还提供了 el-icon 组件用来包裹 svg图标组件 ，使得设置图标大小和颜色更加方便。
但需要在项目中安装 Element Plus ，安装命令如下：
# 选择其中一种方式安装即可。 # NPM npm install element-plus --save # Yarn yarn add element-plus # pnpm pnpm 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="20" color="hotpink"> <edit /> </el-icon>
此时，在 el-icon 上设置 size 和 color 就能控制 svg图标 的大小和颜色。
需要注意的是 size 属性必须传数字，不能传字符串进去！
局部引入
<template> <div> <el-icon :size="30" color="hotpink"> <edit /> </el-icon> </div> </template> <script setup> import { ElIcon } from 'element-plus' import { Edit } from '@element-plus/icons-vue' import 'element-plus/es/components/icon/style/css' </script>
局部引入的话，我们只需要引入 icon 对应的 css 即可。
如果你在 main.js 引入了 element-plus/dist/index.css 就不需要在页面再引入 element-plus/es/components/icon/style/css 。
推荐阅读
《Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）》
《Vue3 过10种组件通讯方式》
《这18个网站能让你的页面背景炫酷起来》
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：cloud.tencent.com/developer/s…
相关知识
Element Plus
Vue 3 + Element Plus实现PC和移动端兼容的技术探讨
el
Element UI 的 el
Element UI树形选择：TreeSelect层级选择方案
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
使用第三方图标库拓展Element UI的图标库
花卉设计元素(Floral Design Element)
普通女孩歌词 – 沙一汀EL
vue + element 树形选择框（多选框）实现
网址: Element Plus 的 el https://m.huajiangbk.com/newsview2544583.html
| 上一篇: 10个优质的免费图标字体库，网页 |
下一篇: 解决Win10系统桌面图标异常问 |
