Сегодня, в мае 2022 года я для себя открыл супер инструмент. Ранее которого мне не хватало. А именно как изменить цвет SVG иконке не вставляя её как код? А вот как.
Вставляем картинку СВГ (чёрно-белую иконку) как обычную картинку через тег IMG SRC
|
1 |
<img src="/work.svg" class="chm__icon_svg"> |
И присваиваем ей стиль через CSS:
|
1 2 3 4 5 6 7 |
img.chm__icon_svg { filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%); -webkit-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%); -moz-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%); -ms-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%); -o-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%); } |
Получится из черного цвета, зеленый цвет. Вот этот код
invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
генерируется в этом сервисе. Указываем там какой нам нужен цвет в формате #00bb12 и получаем код фильтра.
