Экспорт из Sketch для иконочного шрифта

Я понял, как экспортировать SVG из скетча для корректного импорта icomoon:

Шаг 1

Предотвратите создание SVG за пределами границ, выбрав группу контуров и нажав: слой > контуры > векторизовать обводку

Чтобы убедиться, что это сработало, штрихи были преобразованы в замкнутые контуры , а инспектор теперь отображает цвет заливки вместо цвета границы.

Шаг 2

Экспортируйте каждую иконку/svg, щелкнув вкладку «Сделать экспортируемой» в инспекторе и выбрав формат SVG.

Шаг 3

Импортируйте значки SVG в icomoon как обычно, теперь набор должен правильно отображать значки, а размер сетки должен быть точным. ПРИМЕЧАНИЕ. Убедитесь, что все ваши SVG на эскизе имеют одинаковую высоту.

ОБНОВЛЕНИЕ 2016 Спасибо @jackocnr за указание на то, что:

В 2016 году пункт меню «Эскиз» — «Слой» > «Преобразовать в контуры».

Эта инструкция мне подошла. это очень информативно. Автор рассказывает о проблемах с экспортом скетчей. я цитирую из его статьи на случай, если статья будет удалена.

Общее решение

1. Создайте артборд для каждой иконки (вставка -> артборд).
2. Убедитесь, что положение каждой монтажной области не содержит полупикселей и является четным числом.
3. Удалите все вращения значков.
4. Удалите все ограничивающие рамки, чтобы Sketch не экспортировал ненужный код.
5. Предотвратить создание SVG из слоя границ> пути> векторизовать обводку (спасибо, Гас )
6. экспортировать чистый .svg

*это иконка, которую писатель пытался экспортировать

Ошибки экспорта эскиза

Ошибка №1

исправлен экспорт преобразования эскиза путем изменения положения монтажной области на четное число. Это удаляет любое преобразование в коде. С другой стороны, поскольку позиция была смещена на полпикселя, Sketch изменил размер моего окна просмотра на 0 0 25 25. Мой исходный артборд был 24 x 24 пикселя. Эта ошибка даже добавляла спецификации в код. Нет буэно.

Ошибка №2

Проблема: по дизайну каждая иконка имеет ширину: 24 пикселя, высоту: 24 пикселя и радиус границы: 3 пикселя. Проблема в том, что при экспорте прямоугольник был добавлен в путь, что затрудняет масштабирование любого размера с помощью css.

Решение: удалите любую прозрачную ограничивающую рамку и позвольте css сделать волшебство. Все, что действительно было нужно разработчикам, это окно просмотра, установленное на 24 x 24px. Они могут добавить ширину, высоту и радиус границы.

Ошибка №3

Проблема: Sketch экспортирует поворот (-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 о создании составных путей вручную, но, похоже, это сработало правильно.

(моей фигурой был круг с двумя вырезанными из него фигурами.)