У нас наметился очередной редизайн, и снова всплыла проблема, с которой мы живём уже очень долго — зоопарк иконок.

Если кратко: мы не можем инлайнить SVG или использовать что-нибудь вроде Font Awesome, потому что у пользователя должна быть возможность кастомизировать любую иконку в продукте. А само решение было реализовано лет так 7 назад.

В итоге все иконки подгружаются через background-image, а это значит, что если нужно изменить цвет иконки по ховеру — придётся подгружать новую иконку (спрайты тоже не можем использовать).

Выглядит это примерно вот так:

.icon { background-image: url(./icon.svg);

&:hover, &:focus-visible { background-image: url(./icon-hover.svg); }

&–active { background-image: url(./icon-active.svg); } }

🫠 В 2026 году подход, конечно, пиздец очень грустный.

Из-за этого каждая иконка дублируется в среднем 3 раза. Представляете, сколько времени занимает добавить новую иконку…

Но, как ни крути, идёт 2026 год, и теперь мы можем использовать CSS-маски — mask-image.

По сути, мы просто указываем цвет фона, а в качестве маски выступает иконка. В итоге получается, что мы её просто перекрашиваем:

.icon { mask-image: url(./icon.svg); background-color: var(–icon-color);

&:hover, &:focus-visible { background-color: var(–icon-color-hover); }

&–active { background-color: var(–icon-color-active); } }

В итоге, чтобы поменять цвет иконки, достаточно изменить background-color. А если иконка используется в кнопке, можно воспользоваться currentColor — ровно так же, как и для SVG.

Может, выглядит так себе (хотя вроде норм, да и выбора у нас всё равно нет), зато у подхода есть ряд преимуществ: - из коробки работает асинхронная загрузка — не будет проблемы с раздутым бандлом; - HTML-разметка не раздувается из-за инлайна SVG; - частично решает проблему зоопарка иконок, так как не нужно хранить иконку для каждого цвета.

Ещё по теме:

1️⃣ Если у вас иконки инлайнятся и раздувают бандлы, советую посмотреть доклад SVG в React: как автоматизировать процесс добавления новых иконок с прошлого «Я 💛 Фронтенд». Там рассказано, как решили проблему жирного бандла в Centra — с помощью динамического импорта иконок.

2️⃣ А если вам интересно как с зоопарком иконок боролись в VK — посмотрите доклад Зоопарк иконок: упрощаем работу с иконками для дизайна и разработки. Оказывается дизайнеров тоже можно научить пользоваться гитом и сбросить всю ответственность за иконки на них 😅.

Давайте сверимся по иконкам: - 👍 — не знал про mask-image; - ❤️ — использую библиотечные иконки и нет проблем - 🔥 — просто инлайню SVG

#frontend #css