Я пытаюсь экспортировать значки SVG из Sketch для импорта в Fontello, однако SVG не подходит для приложения (они также не работают в IcoMoon).
Значок, который я пытаюсь создать в виде теста, представляет собой простой значок в стиле «гамбургер», состоящий всего из нескольких строк, но он не будет работать правильно. Это расстраивает, если не сказать больше.
Кто-нибудь имеет опыт работы с этим и может расстаться со своими знаниями? Спасибо.
fonts
icon
sketch-app
Алекс МакКейб
источник
источник
Ответы:
Я понял, как экспортировать SVG из эскиза для правильного импорта в icomoon:
Шаг 1
Чтобы предотвратить создание SVG из границ, выберите группу путей и нажмите: слой> пути> векторизация обводки
Чтобы понять, что это сработало, обводки были преобразованы в замкнутые контуры, и инспектор теперь отображает цвет заливки вместо цвета границы.
Шаг 2
Экспорт каждого значка / SVG, нажав на вкладку Make Exportable в инспекторе и выбрав формат SVG.
Шаг 3
Импортируйте иконки SVG в icomoon как обычно, теперь набор должен отображать иконки правильно, а размер сетки должен быть точным. ПРИМЕЧАНИЕ. Убедитесь, что все ваши SVG на эскизе имеют одинаковую высоту.
ОБНОВЛЕНИЕ 2016 Спасибо @jackocnr за указание на то, что:
источник
Это руководство сработало для меня. это очень информативно. Он рассказывает о проблемах экспорта эскизов. Я цитирую его статью на случай, если статья будет удалена.
Общее решение
* это значок, который писатель пытался экспортировать
Набросок ошибок экспорта
Ошибка № 1
исправлен экспорт преобразования эскиза путем изменения положения монтажной области на четное число. Это удаляет любое преобразование в коде. С другой стороны, поскольку позиция была отключена на полпикселя, Sketch изменил размер моего окна просмотра на 0 0 25 25. Мой оригинальный артборд был 24 x 24px. Эта ошибка даже добавила спецификации в код. Нет Буэно.
Ошибка № 2
Проблема: по дизайну каждая иконка была настроена на ширину: 24 пикселя, высоту: 24 пикселя и радиус границы: 3 пикселя. Проблема заключается в том, что при экспорте в путь был добавлен прямоугольник, что затрудняет масштабирование до любого размера с помощью CSS.
Решение: Удалите все прозрачные ограничивающие рамки и позвольте css сделать магию. Все, что действительно нужно разработчикам, - это окно просмотра, настроенное на 24 x 24 пикселя. Они могут добавить ширину, высоту и радиус границы.
Ошибка № 3
Проблема: Sketch экспортирует поворот (-180.000000).
Решение. Откройте значок .svg в Adobe Illustrator, поверните значок и перетащите его обратно в Sketch. Это удаляет вращение все вместе.
Ошибка № 4 Проблема: с помощью инструмента слайс экспортировать перевод и преобразование снова. Решение: ничего. Просто не делай этого. В любом случае это занимает слишком много времени и является пустой тратой времени.
источник
Если вы используете подпути, выровняйте фигуру перед экспортом. Я все еще получил ошибку в Fontello о создании составных путей вручную, но, похоже, он работал правильно.
(моя фигура представляла собой круг с вырезанными из него двумя фигурами.)
источник