Подготовка и импорт SVG-иконок в Figma

На предыдущих этапах мы создали чекбоксы и радиокнопки. Но интерфейс на Next.js требует визуальных подсказок. Чтобы кнопки и поля ввода выглядели профессионально, интегрируем в них иконки.

В современном вебе стандартом считается SVG-иконка (Scalable Vector Graphics). Это не картинка из пикселей, а набор математических координат. Она идеально масштабируется и позволяет менять цвет через CSS.

Анатомия правильной иконки

Если просто перетащить SVG в Figma, при замене одной иконки на другую верстка «поплывет». Чтобы этого избежать, используйте правило Bounding Box (ограничительная рамка).

Впишите каждый символ в квадратный фрейм фиксированного размера, например 24x24 px. Даже если иконка узкая, её внешние границы должны оставаться неизменными. Это гарантирует предсказуемое поведение в автолейаутах.

Как показано на Схеме 1, системный подход избавляет от проблем с выравниванием.

Подготовка вектора: чистим мусор

Разработчики Next.js оценят чистый код, а Figma — отсутствие лишних слоев. Перед импортом выполните три действия:

1. Outline Stroke: преобразуйте обводки в заливки (Shift + Cmd + O). Так толщина линий не исказится при масштабировании.
2. Flatten: объедините кривые в один слой (Cmd + E).
3. Union Selection: если иконка состоит из нескольких фигур, соберите их через булевы операции в один объект.

⚠️ Важно: избегайте масок (Clip path). При экспорте в код они часто отображаются некорректно, «обрезая» части иконки в браузере.

Оптимизация SVG

Оптимизация SVG — это удаление лишних метаданных, которые оставляют графические редакторы. Этот «цифровой шум» увеличивает вес файла и мешает стилизации.

Используйте плагины (например, SVGO), чтобы очистить код. Хороший SVG содержит только координаты путей (path) и базовые атрибуты.

Признак	Плохо (грязный SVG)	Хорошо (оптимизированный)
Слои	Группы, маски, скрытые пути	Один чистый векторный слой
Цвет	Жесткий код fill="#334455"	Параметр currentColor
Код	Лишние id, class, metadata	Только viewBox и path

Организация в Figma

Создайте отдельную страницу Icons. Используйте именование через слэш для автоматической группировки компонентов:

• Icon/Actions/Close
• Icon/Navigation/Arrow-Right
• Icon/Social/Github

Так вы мгновенно найдете нужный символ в меню вариантов.

Совет эксперта: установите цвет иконки как Selection Color. Это позволит позже привязать к ней семантические переменные (Tokens), которые мы создали в начале курса 🧭

Фундамент готов. Наши иконки легкие и стандартизированные. В следующей теме мы соберем универсальный компонент, который позволит менять иконки внутри кнопок в один клик.