从Sketch导出图标字体

我正在尝试从Sketch导出SVG图标以导入到Fontello，但是SVG对于该应用程序似乎不正确（它们在IcoMoon中也不起作用）。

我尝试创建的图标是一个简单的“汉堡”风格的图标，只有几行，但是它们无法正常工作。至少可以说令人沮丧。

是否有人对此有任何经验并可以放弃自己的知识？谢谢。

我想出了如何从草图导出SVG以便icomoon正确导入：

步骤1

通过选择路径组并单击：图层>路径>矢量化笔划，防止SVG 越界

要知道这已经奏效，笔触将转换为闭合路径，并且检查器现在显示填充颜​​色而不是边框​​颜色。

第2步

通过单击检查器上的“ 使可导出”选项卡并选择SVG格式来导出每个图标/ svg 。

第三步

像往常一样将SVG图标导入icomoon，现在该集合应正确显示图标，并且网格大小应该准确。注意：确保草图上的所有SVG都具有相同的高度。

2016年更新 感谢@jackocnr指出：

在2016年，“草图”菜单选项为“图层”>“转换为轮廓”

本手册对我有用。这是非常有用的。他谈论素描输出问题。我引用他的文章，以防该文章被删除。

整体解决方案

1. 为每个图标创建一个画板（插入->画板）。
2. 确保每个画板的位置没有半像素，并且是偶数。
3. 删除所有图标旋转。
4. 删除所有边界框，以使Sketch不会导出不需要的代码。
5. 防止SVG超出边界层>路径>矢量化笔划（感谢Gus）
6. 导出Clean .svg

*这是作者尝试导出的图标

草图导出错误

错误＃1

通过将画板位置更改为偶数来修复草图变换导出。这将删除代码中的所有变换。另外，由于位置偏离了半像素，Sketch将我的视图框的大小更改为0 0 2525。我的原始画板为24 x 24px。该错误甚至在代码中添加了规范。没有布宜诺斯艾利斯

错误＃2

问题：根据设计，每个图标的宽度分别设置为：24px，高度：24px和边框半径：3px。问题是，导出时，矩形已添加到路径中，因此很难通过css缩放任何大小。

解决方案：删除任何透明的边框，然后让CSS发挥作用。开发人员真正需要的只是将视图框设置为24 x 24px。它们可以增加宽度，高度和边界半径。

错误＃3

问题：草图导出旋转（-180.000000）。

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

解决方案：将.svg图标打开到Adobe Illustrator中，旋转该图标，然后将其拖放回Sketch中。这样就一起消除了旋转。

错误＃4 问题：使用切片工具导出时再次进行转换和转换。解决方案：无。只是不要这样做。无论如何，切片花费的时间太长，浪费时间。

如果使用子路径，请在导出之前展平形状。在Fontello中，我仍然遇到有关手动创建复合路径的错误，但是它似乎已经正常工作。

（我的形状是一个切出两个形状的圆。）