Для изменения цвета иконки SVG в CSS обычно используется свойство fill. Задавая свойству fill значение нужного цвета, можно изменить цвет заливки иконки.
Пример SVG-иконки:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M18 8H6v8h12V8zm2-4H4v12h16V4z"/>
</svg>Чтобы изменить цвет заливки этой иконки, нужно прописать стили для этой иконки в CSS.
svg {
fill: red;
}Здесь прописываются стили для всех SVG-иконок на странице. Если нужно изменить цвет только для конкретной иконки, можно прописать стиль для класса или ID этой иконки.
Например, если SVG-иконка имеет класс «icon», то стили можно прописать так:
.icon {
fill: red;
}Кроме того, чтобы изменить цвет контура иконки, можно использовать свойство stroke. Например, чтобы задать цвет контура иконки зеленым, можно добавить такой стиль:
svg {
fill: red;
stroke: green;
stroke-width: 2px;
}Здесь свойство stroke-width устанавливает толщину контура в 2 пикселя. Свойство stroke-opacity можно использовать для задания прозрачности контура.
