IconPark
- 更新日期:2022-04-29
- 查看次数:2499
详细介绍
IconPark 开源图标库
Iconpark图标库于2019年7月正式立项,经历了一年的研发工作,现在就要和大家正式见面了。 IconPark致力于图标应用规范化、统一化,提供丰富多样的高质量图标内容,满足批量配置图标样式的能力;同时满足多方技术团队通过接口调用图标资源,让图标使用变得更简单,更高效。
为什么要做?
开始做这个项目的初衷其实是为了满足内部设计的图标需求,我们团队大部分是B端产品,对图标的需求量比较大,各平台之间的图标风格差异很大,在品牌体验上很难形成统一的体验和认知;无论是设计师还是开发同学,对于图标的管理和使用也没有统一的收口,导致管理成本很高。为了解决这些问题,我们决定做内部图标库。后来随着绘制数量的增多,就发现这是一笔设计财富,相信这也会对其他有需要的人带来帮助,就把目标放到了开源上面,希望能为更多有需要的同学带来帮助。
做了什么?
通过收集各业务线的图标使用情况,我们对全部图标进行汇总、分类和分析,抽离出高频的图标进行图标绘制规则的定义。这个过程中我们会考虑到图标的屏显效果,复杂程度,疏密关系,线性还是面性等问题,让绘制规范变得更通用,更简单。
通过对图标的分析研究,制定出不同于常规思路的Keyline绘制规范,我们在Keyline的制定上充分考虑了图标坐标小数点问题,所以我们的Keyline是绘制版的,要求绘图时路径要落在Keyline上,很大程度上能够减少坐标小数点的出现,以保证屏显的最佳效果。
绘制方式是以线性绘制为标准,这样图标在使用中就可以通过调整线的属性来改变图标的样式了,这比用图形绘制的图标在修改和调整上会方便很多。线性天生就具有更好的灵活性,图形化的图标比较受限,大多数软件对线是有很多的属性调整设置的,对于面性的属性调整相对比较有限。
图标命名与分类是一个比较重要,也比较惹人烦的事情,我们在前期没有特别严谨对待这件事情,所以后面的分类调整上遇到了很多的坑,后面不得不对线上1291个图标进行命名和分类的梳理优化,这是一个漫长又煎熬的事情,没办法,自己留的坑,边哭边改。
图标的样式配置,这也是图标库最有特色的一点,完全是通过技术能力实现的,通过改变一套基础图标的Svg基础属性配置,就能达到N多套图标风格,极大的提高了图标的可应用性;对于图标的大小、线粗、风格、拐角、端点都可实现灵活配置。在线性、填充、双色、多色的风格变化的方案实现中,经历了比较多的难题,最终我们按照颜色最多的四色风格作为基础图标样式,通过对于颜色的删减实现双色、填充和线性图标风格,线上的最终功能实现比较符合预期。
做成什么样?
现在整个图标库的基础服务已经开发完成,字节跳动公司内部已经投入使用,受到各业务团队的热捧,图标的整体使用情况也是比较正向的,每周,每月都会有比较明显的数据提升。截止2020-09-02,总下载量超过11万次,NPM包单周下载峰值达7300+,最近一个月下载量近3万次,被各部门近50个前端框架作为依赖包引入。
也正是因为如此的倍受青睐,我们正式对外开源,把这套图标库开源给更多的人去使用,希望能为更多的人带来帮助,也欢迎大家能够多多的提供建议和需求,一块把图标库做的更好。
——介绍来源于官网