Как темизировать иконки разноцветные svg?

Чтобы темизировать разноцветные иконки SVG в CSS, вы можете использовать несколько подходов, которые позволят вам изменить цвета иконок в зависимости от ваших потребностей.

1. Метод fill: используя стиль fill в CSS, вы можете изменить цвет (заполнение) иконки SVG. Вот пример:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="red" d="M12 2L3 8v7h3v4h12v-4h3V8L12 2zm7 13h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
</svg>

Здесь мы установили fill="red" для изменения цвета иконки на красный.

2. Использование класса и стилей: вы можете применить класс к элементу SVG и использовать CSS для изменения цветов. Вот пример:

<svg class="custom-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L3 8v7h3v4h12v-4h3V8L12 2zm7 13h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
</svg>

.custom-icon {
  fill: blue;
}

Здесь мы применили CSS класс custom-icon к элементу SVG и установили fill на синий цвет с помощью стиля.

3. С помощью фильтров: вы можете использовать фильтры CSS для изменения цвета иконок. Вот пример:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path filter="url(#custom-filter)" d="M12 2L3 8v7h3v4h12v-4h3V8L12 2zm7 13h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
  <defs>
    <filter id="custom-filter">
     <feColorMatrix type="matrix" values="0 0 0 0 1 
                                          0 0 0 0 1 
                                          0 0 0 0 1 
                                          0 0 0 1 0"/>
    </filter>
  </defs>
</svg>

Здесь мы применили фильтр feColorMatrix к элементу SVG, чтобы изменить цвета иконки с помощью матрицы цветов.

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