深度揭秘可部署矢量字体图标管理平台YIcon

公司现在已有一整套的Icon，那我们应该如何绘制一个Icon，让其风格与之前的保持统一呢。

| 在设计icon时，按标准化规范设计

icon设计的标准化规范是图标栅格化矢量设计，像素满格，轮廓精确对齐1px网格，而不是0.1px ~ 0.9px，减少线条发虚。

我们公司的删格模板（白色画板大小28px*28px，每格1px*1px），大同小异

圆形icon

举例：直径为28px 描边为2px

方形icon

举例：边长16px，圆角1px，内部均为直角，主线条2px，辅助线条1px（由于方形本身视觉上看起来比圆形大，因此在同一范围内方形要往中心点收缩一部分才会让两者在视觉上保持一致）。

水平矩形icon

举例：宽28px高21px，圆角1px，内部均为直角，主线条2px，辅助线条1px

竖直矩形icon

举例：宽24px高26px，圆角1px，内部均为直角，主线条2px，辅助线条1px

不规则icon

举例：图中音符高28px宽27px，圆角不定，主线条2px，辅助线条1px

以上只是拿一套图标中的几个做个范例，最终目的要做到利用这些核心形状做为向导，使整个相关产品的图标保持一致的视觉比例。

关键点

● 主线条2px，辅助线条1px，不要修改它

● 一致的圆角半径（1px）是统一全系列系统图标的关键，不要修改它

● 图标内部的角应为直角，不要修改它

● 在部分只由线段组成的图形中（比如 ❌ ），线段的端点为圆头端点，不要修改它

| 制作成字体图标方便后续使用

按照图标制作规范画完icon后，我们经常会制作成字体图标。

什么是字体图标

利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。

为什么要制作字体图标

● 字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。

● 文件小。

● 加载性能好。

● 支持css样式。

● 兼容性好。

如何制作字体图标

我们现在用的字体图标平台是阿里巴巴旗下的Iconfont，我们先来看一下它的制作指南。

除了遵守以上规则外，我们需要新建一个画板（560px*560px），将制作的28px*28px的图标复制进去，按快捷键command+k开启首选项设置，勾选“缩放描边和效果”选项，如下图所示

然后将28px*28px的图标放大为560px*560px，上下左右居中对齐画板。然后导出为svg文件。

最后打开iconfont页面，上传svg文件并选择去除颜色并提交。

这样我们就会在我的图标内看到刚刚上传的图标，字体图标就上传成功了

如何把字体图标给到开发

通常开发要用字体图标，会找到设计师。那设计师应该如何交付字体图标呢

这时候字体图标的强大之处就体现出来了，感谢阿里爸爸提供这个平台～～

我们只需要选择开发需要的图标项目，下载到本地就可以，会自动生成一个文件包，给到开发就好了。

到此，字体图标的整个制作流程就完成了，这个流程基本上可以适用，除非某些大型公司有自己特别的规范和标准。