🎨 Перекрасить SVG-иконку внутри <img> прямо из CSS

SVG-иконку в <img> браузер кеширует, у неё есть alt и loading="lazy". Но поменять fill отдельной фигуры внутри неё из CSS нельзя. Поэтому иконки чаще вставляют инлайном и раздувают DOM.

Экспериментальная возможность CSS под названием Linked Parameters предлагает другой путь. В SVG-файле цвет берётся из переменной: fill="env(--color, #c1f07c)". А страница передаёт значение снаружи:

img {
  link-parameters: param(--color, #ff8052);
}

Браузер без поддержки просто возьмёт запасной #c1f07c, и иконка не сломается.

Оговорка: пока это работает только за флагами в Firefox Nightly и Safari Technology Preview. Когда появится во всех браузерах, неизвестно.

Если дойдёт, иконки можно будет держать отдельными кешируемыми файлами и красить их из CSS одной строкой.

👍 - если было полезно

👉 @frontendInterview