У дизайнера есть несколько разных способов передать иконки разработчику:
— отдельными файлами PNG и спрайтом PNG,
— отдельными файлами SVG и спрайтом SVG,
— иконочным шрифтом.
Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Sketch автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.
В этом посте я расскажу о нашей схеме, покажу скрипты сборки. Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический Asp.Net MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов.