Статья Как нарисовать стандартную иконку [Все доки](https://hackmd.io/UbcEkPsoSXiok4QZx_TnIQ) # Как нарисовать стандартную иконку ## Типы иконок Для большинства мест в интерфейсе подходят наши стандартные навигационные иконки. Это те иконки, которые используются повсеместно на сайте и приложении, и как правило выполняют какую-то служебную функцию. Например: - вернуться на экран назад (стрелочка)![](https://i.imgur.com/EbCC1te.png) - удалить товар (ведёрко)![](https://i.imgur.com/99t4FTS.png) - перейти к выбору адресной доставки (домик)![](https://i.imgur.com/IQglcJA.png) - выбрать дату (календарь)![](https://i.imgur.com/AL8PqmO.png) и так далее. ### Таких стандартных иконок у нас два размера: - [16х16](https://www.figma.com/file/NUkikBKmMo6WiXbWbHJWhkWh/Icons?node-id=1%3A13) - [24х24](https://www.figma.com/file/NUkikBKmMo6WiXbWbHJWhkWh/Icons?node-id=1%3A31) Эти размеры обозначают размеры фрейма, в которые вписаны иконки. Непосредственные размеры иконок чуть меньше и могут не совпадать от иконки к иконке — это нормально. ![](https://i.imgur.com/hr06gbl.png) ![](https://i.imgur.com/3JY5L3V.png) ### Также иконки бывают трёх видов - Stroked — линейные - Filled — с заливкой - Colorful — с заданным цветом в основном мы используем линейные иконки, а иконки с заливкой используются, чтобы показать смену состояния. Например, товар до добавления в избранное и после добавления в избранное: ![](https://i.imgur.com/ojleDZX.png) ### Что нельзя Нельзя изменять размер иконок, растягивать их или ужимать. Нельзя взять иконку 24х24 и уменьшить до 16х16. У многих больших (24х24) иконок есть маленькие (16х16) аналогичные — используйте нужный размер в зависимости от задачи. Если существующей иконки нет в другом размере, мы её рисуем под этот размер, а не искажаем уже существующую. ![](https://i.imgur.com/1SWcH1m.png) ## Правила отрисовки ### Source и Fill У каждой иконки есть два слоя: - Source — рабочий слой (группа), в котором лежат исходники: обводки и формы, из которых рисовалась иконка. В готовой иконке этот слой всегда скрыт, но хранится на всякий случай, если нужно будет что-то перерисовать. - Fill — верхний слой, который является уже готовой иконкой: все обьекты обьединены в одну векторную фигуру. Для этого мы используем команды Outline stroke (чтобы превратить обводку в обьект), Flatten и Union selection (чтобы слить все части иконки в одну) ![](https://i.imgur.com/moRhHSM.png) ### Толщина линейных иконок Все иконки рисуются линией в два пикселя. Именно поэтому важно не масштабировать иконки, а рисовать отдельные под каждый размер. Для линии (обводки) задаётся параметр расположения center. ![](https://i.imgur.com/3XP5PAG.png) ### Cкругления В наших иконках нет острых углов. Чтобы края линий не были острыми, для них устанавливается параметр сглаженных кончиков — round. ![](https://i.imgur.com/fZOlwwI.png) ![](https://i.imgur.com/RTZImLS.png) Уголкам иконки задаём скругление. Как правило это 1-2 px. ### Области Вокруг иконки до края фрейма, в котором она находится рекомендуется соблюдать охранный отступ, равный 1 px, но это не строгое правило. Главное, чтобы иконка не выбивалась по весу и визуальному центру из общего набора иконок. Примеры стандартных форм иконок с охранными полями: ![](https://i.imgur.com/ojPKRnH.png) ### Цвет Следим, чтобы добавленные в кит чёрные иконки были не совсем чёрными, а цветом 87% Black (#212121) из [токенов](https://www.figma.com/file/eJ2Q6XbVFsJZHPUojBitZB/Tokens?node-id=4%3A72). ## Передача в разработку У разработчиков есть [библиотека стандартных иконок](https://sima-land.github.io/ui-quarks/), которая реализует наши иконки. При добавлении новой иконки или удалении существующей, нужно просить ответственного разработчика вносить изменения в библиотеку. ### Что нельзя - Оставлять Source видимым - Использовать маски при отрисовке иконок Если не соблюдать эти правила, иконка может попросту не отобразиться после её транспортировки в код, либо отобразится некорректно. Случаи были.