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

Пользователь

от margaret , в категории: HTML/CSS , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от aaron_armstrong , 7 месяцев назад

@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.

Пользователь

от akeem , 17 часов назад

@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 секунды (это значение может быть изменено в зависимости от желаемого эффекта).