👋 前言
- 用户就是上帝，站在上帝的角度也就是站在使用者的角度去看待组件。
- 用过不少优秀的
UI库，用的时候美滋滋，轮到自己搭组件库的时候往往会去参考别人的源码。 - 看完源码后恍然大悟 噢！原来可以这样写，但心里难免会有疑惑别人是怎么想出来这种解决思路的？🤳
- 这一系列文章主要是面向未理解或者有疑惑的同学所以讲的比较基础，就让我们站在用户的角度去思考结构，看看换一种思路去写代码是不是有变化？
关于Icon组件
🙇 为什么我们会用到Icon
👨💼 作为用户
- 一个很简单的例子，如果一个按钮是有图案并且颜色鲜艳的，另外一个按钮只是单调的一个方块，哪一个看上去会更舒服呢？
- 一个页面中不仅仅只有图片和文字组成，还应该有各种各样的
icon搭配而成。
👨💻 作为组件库使用者
- 我们可以看到很多的组件库都有
Icon，相信每个组件库的第一个组件都应该是Icon。 - 当我们将组件库的
Icon组件放到我们的页面我们想要的效果是什么？
- 一个个好看能代表组件库风格的图标。
- 可以添加类名使用。
- 图标足够多可以选择。
搭建组件
接下来可能用尽可能少的代码搭配
element的源码进行结构说明，配合element Icon源码食用更加美味喔
准备图标
- 要设计一个上图这种的
Icon可以说是很简单，我们只需要引入我们的所有图标样式即可，有一些可能是svg也有的是通过伪类获取。 - 总结起来总共也只有
3个要点
- 首先我们要准备一套图标，可以由自己的设计师设计也可以去网上找。
- 给这些图标都统一前缀并设置不同的后缀名称。
- 在
icon组件中通过不同的图标名称来分别渲染不同组件。
- 我们可以在iconfont库中来选择一些设计师已经设计好的图标。
- 可以自己一个个选择也可以直接用现成的一整套图标，接下来我就用一整套现成的来演示。
- 首先进入一套图标的选择页面，可以看到他只有一个个的加入购物车，我们可以打开
f12输入这段代码。
var span = document.querySelectorAll('.icon-cover'); for (var i = 0, len = span.length; i < len; i++) { console.log(span[i].querySelector('span').click()); }
- 可以看到我们选择了这
180个图标进入了购物车，点击添加至项目。
- 这样这些我们就可以设置前缀名称了，点击项目设置，给他们都加一个前缀名。
- 完成后我们将这些图标全部下载到本地。
资源引入
- 刚刚下载后会有很多文件我们只需要用到这四个就可以了。
- 在自己的项目中引入
iconfont.css，记得在iconfont.css的开头引用图标的时候要设定相对于的相对路径,每个人的项目因人而异。
@font-face { font-family: "iconfont"; /* Project id 2692054 */ src: url('fonts/iconfont.woff2') format('woff2'), url('fonts/iconfont.woff') format('woff'), url('fonts/iconfont.ttf') format('truetype'); font-weight: normal; font-display: auto; font-style: normal; }
- 这样一来其实我们项目中直接加上这个类名就可以了，他会找到相对应的类名来获取
伪元素，更多样式说明可以看到element 样式
更多需求
- 这样一个
icon组件就已经做好了，只要我们通过样式来找到相应的图标就可以啦。 - 当然
element的Icon对个别的图标也做了动画处理，比如这个loading图标。
- 其实也就是给这个类名加上一个循环播放的动画而已。
.el-icon-loading { animation: rotating 2s linear infinite; }
- 好了这次的组件结构就分享到这里啦，更多的实现可以参考传送门进行学习~
👋 写在最后
- 总的来说
Icon组件相对于其他组件基本上不用操作什么，只需要我们把图标库引入就可以啦。 - 对于组件库的搭建我也在慢慢的摸索，讲的都是我自己得出来的分享所以说可能对于大佬来说会比较基础，但我相信我的不断输出可以帮助到一些有疑惑的同学。
- 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛
