—— 字节跳动商业产品CUX设计团队
IconPark是字节跳动商业化CUX设计团队精心打造的致力于图标应用规范化、统一化，提供丰富多样的高质量图标内容，满足批量配置图标样式的能力；同时满足技术同学在项目中调用 图标组件，让图标使用变得更简单，更高效。
图标是具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。能够在我们短暂的注意力下迅速决策、发现要找的信息，提高我们对于信息获取的效率。
IconPark图标库是一套拥有1300+数量及28个分类的高质量基础图标站点，同时具备个性配置的换肤能力，通过换肤属性配置可以延展出数百万计的图标样式。在设计中遵守去繁从简，风格统一，表意清晰的原则，可适用于更多的场景。体积小，调用灵活，这对于设计师和开发人员的管理协作提供了保障。支持 3种主流代码类型的使用：
项目背景
开始做这个项目的初衷其实是为了满足内部设计的图标需求，我们团队大部分是B端产品，对图标的需求量比较大，各平台之间的图标风格差异很大，在品牌体验上很难形成统一的体验和认知；无论是设计师还是开发同学，对于图标的管理和使用也没有统一的收口，导致管理成本很高。为了解决这些问题，我们决定做内部图标库。后来随着绘制数量的增多，就发现这是一笔设计财富，相信这也会对其他有需要的人带来帮助，就把目标放到了开源上面，希望能为更多有需要的同学带来帮助。
设计原则
- 准确
- 信息图形化，准确表达图标含义；屏显准确，减少锯齿的出现。
- 简洁
- 形式与笔画的简洁，去繁从简，在保证表意的前提下，去除多余细节；
- 可用
- 通过检测图标的访问情况，保证图标的可识别性和可用性；
- 统一
- 保证图标大小、线条粗细、感情特征、端点特征、拐角特征、倾斜角度、基本形状等的统一性；
KeyLine及栅格定义标准
通过对图标的分析研究，制定出不同于常规思路的Keyline绘制规范，我们在Keyline的制定上充分考虑了图标坐标小数点问题，所以我们的Keyline是绘制版的，要求绘图时路径要落在Keyline上，很大程度上能够减少坐标小数点的出现，以保证屏显的最佳效果。
Keyline规范保证了设计图标的统一性，其大小、比例、复杂程度都会标准化、清晰化；栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界；
基础形状
组成图标的基本形状有：矩形、正方形、圆、三角形；
图标大小
图标绘制基于 48x48px 画布绘制的线性图标，线宽默认为 4px，不同场景等比缩放使用；
组成元素
-
**线段与端点：**指组成图标的线段的粗细规范及线段端点规范；
-
**断口与间距：**指图标内元素及断口之间间距规范；
-
**倾斜角度：**指对非垂直及水平线的倾斜角度规范；
-
**拐角度数：**指基于一定规则对图标的拐角弧度进行限定，从而规范图标拐角度数；
-
**封闭与非封闭：**封闭区域由闭合曲线构成，可以进行独立颜色填充；非封闭区域则由非闭合曲线构成，无法进行填充；
1、线段与圆点
为保证风格的整体一致性，图标所有线段端点默认样式为圆；如有与线段同宽的圆点时，为保证视觉平衡，圆点的直径需比线段宽度略大；线段端点坐标和可编辑节点坐标为整数最佳;
2、间距规范
图标内部结构元素与外框的间距不得小于线宽；内部元素之间的间距不得小于线宽的1/2px；外形框的建议尺寸梯度为4的倍数，如：4px、8px、12px等；
3、倾斜角度
图标中的线段倾斜角度应为15度的倍数，保持与Keyline中的对角线或十字垂直相交线保持平行关系；
4、拐角设置
5、封闭与非封闭
图标的封闭与非封闭的属性，决定是否具有图标风格转换的能力，当图标的元素由为封闭图形时，则可以进行独立颜色填则，否则无法进行填充颜色的变换；
- 封闭图形：
- 非封闭图形：
- 当封闭图形为曲线形状且有相交线段时，原则上是不能通过IconPark技术能力实现独立的颜色填充；
图标命名规范
图标命名符合图标表意，统一命名格式，加入分类的前缀作区分；更便于后期管理与维护；
- 中文命名
中文名称要中文名称、易理解、无歧义的原则，当表达状态时用“-”连接；
`例：收藏、喜欢、正方形、矩形、文件夹-下载、文件夹-添加`
- 英文命名
英文命名应为小写，多个单词之间用横杠分割，不能有大写字母、空格、特殊符号，长单词、复合单词视情况可采取首字母缩写的命名方式；
`例：collection、like、square、distance、folder-download、folder-add`
- 相同含义图标命名
相同含义图标的多个图标，通过后缀加数字方式区别；
`例：like、like-one、like-two`
图标风格配置方案
1、线性图标
适配规范：
- 图标内部元素和外部元素属性保持统一，有填充时，填充色透明度为0%；
2、填充图标
适配规范：
-
当图标内部元素与外部元素有闭合时，闭合元素填充，非闭合元素保持描边；
-
当图标内部元素与外部元素有重叠，垂直时用增加一根外部描边属性的线解决，当非垂直时不推荐填充
3、双色图标
适配规范：
- 图标外部元素（闭/开）与图标部元素（闭/开）属性保持统一；
**4、**四色图标
适配规范：
-
图标外元素闭合，图标内元素闭合；
-
当图标外部元素闭合，内部元素不闭合时使用3色方案，
图标元素拆分，Layer Style确立；
C1=外（开/ 闭）-描边
C2=外（闭）-填充
C3=内（开/闭）-描边
C4=内（闭）-填充
**配色方案：**
颜色序列（收敛在4色）：（1）#000；（2）#FFF；（3）#2F88FF；（4）#43CCF8
**图标示例**
线框、填充、双色、四色
项目总结
现在整个图标库的基础服务已经开发完成，字节跳动公司内部已经投入使用，受到各业务团队的热捧，图标的整体使用情况也是比较正向的，每周，每月都会有比较明显的数据提升。截止2020-09-02，总下载量超过11万次，NPM包单周下载峰值达7300+，最近一个月下载量近3万次，被各部门近50个前端框架作为依赖包引入
也正是因为如此的倍受亲赖，我们正式对外开源，把这套图标库开源给更多的人去使用，希望能为更多的人带来帮助，也欢迎大家能够多多的提供建议和需求，一块把图标库做的更好。
网站体验和使用指南
代码地址
-
Github地址：github.com/bytedance/I…
-
NPM下载地址：
-
如果您有什么好的建议或者发现了问题，可以提 建议反馈 告知我们
-
如果您觉得还不错，可以帮忙点个🌟🌟Star🌟🌟鼓励一下我们
