Небольшая фронтендерская привычка, которую почему-то до сих пор часто пропускают - оптимизировать SVG перед тем, как класть их в проект.

Я для этого обычно использую SVGOMG.

Если открыть SVG, который только что экспортировали из Figma, внутри нередко можно найти кучу вещей, которые приложению вообще не нужны: лишние группы, id, defs, слишком длинные значения координат, ненужные атрибуты. Иногда сама иконка визуально элементарная, а SVG при этом выглядит так, будто там половина дизайн-системы.

SVGOMG всё это довольно хорошо чистит. Закинул файл, посмотрел, что получилось, скачал оптимизированный вариант - тратится всего пара минут.

Особенно я обращаю на это внимание в React-проектах, где SVG используются как компоненты. В таком случае весь этот мусор - уже буквально часть нашего кода.

При этом я бы не советовала бездумно выкручивать все настройки оптимизации на максимум. На сложных SVG можно случайно сломать маски, градиенты или clipPath. Проверьте, остался ли нормальный viewBox и fill/stroke, особенно если иконка должна наследовать currentColor.

На проекте с десятками и сотнями иконок я бы вообще не оставляла это на ручном уровне - там уже логичнее настроить SVGO и автоматически прогонять SVG.

Забегайте в мой телеграм, чтобы не пропустить следующие посты 🩷