Экспорт из Sketch для иконки

Я пытаюсь экспортировать значки SVG из Sketch для импорта в Fontello, однако SVG не подходит для приложения (они также не работают в IcoMoon).

Значок, который я пытаюсь создать в виде теста, представляет собой простой значок в стиле «гамбургер», состоящий всего из нескольких строк, но он не будет работать правильно. Это расстраивает, если не сказать больше.

Кто-нибудь имеет опыт работы с этим и может расстаться со своими знаниями? Спасибо.

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

Шаг 1

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

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

Шаг 2

Экспорт каждого значка / SVG, нажав на вкладку Make Exportable в инспекторе и выбрав формат 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 24px. Эта ошибка даже добавила спецификации в код. Нет Буэно.

Ошибка № 2

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

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

Ошибка № 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 о создании составных путей вручную, но, похоже, он работал правильно.

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