【封装UI组件库系列】封装Icon图标组件

封装UI组件库系列第三篇·封装Icon图标组件

🌟前言

🌟封装Icon

1.创建Icon组件

 2.引用svg图标库

第一步

 第二步

 第三步

3.二次封装

4.封装自定义属性

 🌟总结

---

🌟前言

在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-ui、Ant Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。

【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。技术方面使用的是Vue3 + Vite + Sass 来完成一个模仿Element Plus的组件库。最终完成效果如下：

从零开始封装UI组件库效果演示

🌟封装Icon

1.创建Icon组件

删除components中的内容，新建Icon/Icon.vue 创建组件模板：

接下来在mian.js中引入并注册自定义组件：

 2.引用svg图标库

因为我们不可能去一个个画这些图标，所以需要使用到现成的图标库，我这里选择的是fortawesome图标库。

第一步

先安装fortawesome核心包：

pnpm add @fortawesome/fontawesome-svg-c