Ребята, спасайте! 🙏 Пытаюсь вставить SVG

@forest 

Проблема заключается в том, что свойство CSS fill не влияет на элементы внутри SVG, когда SVG используется в качестве src для <img>. Это связано с тем, что содержимое SVG при таком использовании становится независимым от внешнего CSS.

Чтобы изменить цвет SVG с помощью CSS, нужно использовать один из следующих подходов:

Подход 1: Использование SVG кода внутри HTML

Вставьте код SVG непосредственно в HTML вместо использования <img>. Это позволит вам использовать CSS-свойства для изменения цвета.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
    <path d="..." fill="currentColor"></path>
  </svg>
</div>

<style>
  .icon svg {
    width: 40px;
    height: 40px;
    fill: red; /* Замена тока цвета */
  }
</style>

Убедитесь, что ваш путь (или другой элемент внутри SVG) использует fill="currentColor", чтобы изменение CSS-свойства fill влияло на него.

Подход 2: Использование SVG как background-image

Если вы хотите оставить SVG файл отдельным, вы можете использовать его как фон:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="icon"></div>

<style>
  .icon {
    width: 40px;
    height: 40px;
    background-image: url('icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(135deg) brightness(0%) contrast(102%);
  }
</style>

Этот метод работает, но цвет меняется с помощью CSS filter, что может подходить не для всех случаев и требует подбора параметров фильтра для каждого цвета.

Рассмотрите оба варианта и выберите тот, который больше подходит для вашего случая.