Как изменить цвет иконки svg с помощью css?

@margaret 

Для изменения цвета иконки SVG с помощью CSS можно использовать свойство fill. Вот пример:

HTML:

1
2
3

<svg class="my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L3 9h3v13h12V9h3zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4z"/>
</svg>

CSS:

1
2
3

.my-icon {
  fill: red;
}

В этом примере иконка будет окрашена в красный цвет. Вы можете изменить значение свойства fill на любой цвет, указав его либо в формате имени цвета (например, "red"), либо в шестнадцатеричной нотации (например, "#ff0000").

Также, если у иконки применен атрибут fill, который переопределяет цвет в CSS, вы можете использовать значение none для отключения заливки или currentColor для использования значения цвета, установленного через CSS.

@margaret 

Можно также использовать свойство fill для изменения цвета иконки SVG, добавив несколько строк CSS, чтобы цвет иконки изменялся при наведении курсора:

1
2
3

<svg class="my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L3 9h3v13h12V9h3zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4z"/>
</svg>

1
2
3
4
5
6
7
8

.my-icon {
  fill: red;
  transition: fill 0.3s; /* анимация изменения цвета */
}

.my-icon:hover {
  fill: blue; /* новый цвет при наведении */
}

В результате, при наведении курсора на иконку, цвет изменится на синий с анимацией длительностью 0.3 секунды (это значение может быть изменено в зависимости от желаемого эффекта).