Создание SVG-иконки

1. Для создания иконок лучше использовать программы Photoshop или Figma.

Photoshop — платная программа.

Figma — начальный версия бесплатна. Может работать в браузере.

2. При создании иконки нужно учитывать размер поля, в которое она будет помещена.

В данном случае 40х40px:

Если иконка будет больше этого поля, то она уменьшится и линии будут нечеткими.

3. Как только иконка будет нарисована, все слои, из которых она состоит, нужно поместить в группу в Photoshop. В Figma нужно поместить в группу или фрейм.

Photoshop — группа

Figma — фрейм

Figma — группа

4. Экспортируйте иконку в формат SVG.

Photoshop
Клик правой кнопкой мыши по группе с иконкой. Выберите Export as.

Удостоверьтесь, что выбран формат SVG. Нажмите Export All.

Figma
Если иконка сделана во фрейме, убедитесь, что у фрейма не включена галка Clip content.

Выделите фрейм или группу с иконкой. В правой панели в блоке Export выберите SVG и нажмите Export.

5. Проверьте иконку в браузере. Все линии и фигуры в иконке должны быть в теге <path>. Не должно быть тегов, например, <rect> (Инструмент «Rectangle» в Figma) или <circle> (Инструмент «Ellipse» в Figma). Иначе иконка не будет краситься в цвет темы.

Если эти теги есть, вернитесь и измените так, чтобы был <path>. Например, изменить <rect> на <path> в Figma можно, если нарисовать прямоугольник не инструментом «Rectangle», а инструментом «Pen».