二次封装el-icon 二次封装el-icon

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
简介点赞 + 关注 + 收藏 = 学会了

这是一篇对日常工作没什么帮助的文章~
如果你还不太清楚 Element Plus 的 icon 是如何使用的，可以先阅读《Element Plus 的 el-icon 到底怎么用》

Element UI 和 Element Plus 的 icon 用法是不一样的，在 Element Plus 中都改成了 svg 。
我在《Element Plus 的 el-icon 到底怎么用》里也对比过用法。

我习惯了 Element UI 的用法，但又喜欢用 Vue3 ，所以就在 Element Plus 的基础上二次封装了一个语法有点像 Element UI 里 icon 的组件出来。

虽然在我日常的 Vue3 项目中不会用本文所讲的这个组件，但我还是要搞出来。因为我真的好闲。
【二次封装el-icon】

设计要实现的功能

通过 type 属性使用指定的 svg 图标。
size 属性传入 number 或者 string 都行，Element Plus 只支持 number，所以用的时候需要 v-bind:size="20" 这样写，或者用简写，但有时候还是会忘记加 v-bind，所以直接支持 size="20" 这样的字符串会更方便。
type 属性支持首字母小写，Element Plus 使用的 svg 是大驼峰格式的，但有些短的单词有时候真的会忘记首字母大写。
color 属性直接照搬回 Element Plus 的。

最终的使用方式

因为是二次封装，所以不能用回，这是 Element Plus 的组件。
本次封装的目的是简化 icon 的使用方式，所以我把标签名也跟着简化了，变成

缺点
打包出来的体积可能会大一丢丢。

开发开发中涉及的技术点：

组件通讯
动态组件
全量引入 Element Plus 提供的 svg图标

本文的例子主要使用 props 的方式进行组件通讯。
如果你想了解更多 Vue3 的组件通讯方式，可以阅读《Vue3 过10种组件通讯方式》

本例的代码比较简单，对应代码，跟着我的实现步骤来看。
以下是我的实现步骤：

全量引入 svg图标
引入 icon 样式
接收父组件传入的 size 、color 和 type
让 size 也兼容字符串类型（Element Plus 只支持 number）
图标名称首字母转大写
通过中括号的方式动态获取 svg图标

做这类组件，我通常会给组件一个 name，可以看到上面的代码是有 name 的，并且这个 script 没加 setup

使用在页面中引入并使用

你也可以在 main.js 里通过 app.use 全局注册该组件。

推荐阅读《Element Plus 的 el-icon 到底怎么用？》
《Vue3 过10种组件通讯方式》
《Vue3 递归组件》
《Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）》
本例代码在这：e-icon
点赞 + 关注 + 收藏 = 学会了