Существует несколько способов окрасить спрайт или изменить цвета отдельных частей svg-иконки.
1. Используйте CSS:
- Добавьте классы или ID к отдельным элементам внутри svg-иконки.
- В вашем CSS файле определите стили для этих классов или ID, включая свойство `fill`, которое устанавливает цвет заливки.
- Назначьте этот CSS класс или ID для нужных элементов в svg-спрайте.
Пример CSS:
```css
/* Ваш CSS файл */
.my-icon .path1 {
fill: red;
}
.my-icon .path2 {
fill: blue;
}
```
```html
<!-- Ваша HTML разметка -->
<svg class="my-icon">
<path class="path1" d="M0 0h24v24H0z" />
<path class="path2" d="M0 0h24v24H0z" />
</svg>
```
2. Используйте фильтры SVG:
- Добавьте фильтры SVG к вашему спрайту SVG, чтобы применить эффекты, такие как изменение цвета.
- Определите фильтр с помощью элементов `<filter>` и `<feColorMatrix>` внутри вашего SVG-спрайта.
- Назначьте фильтр для нужных элементов в спрайте, используя атрибут `filter`.
Пример SVG с фильтром:
```xml
<svg>
<defs>
<filter id="colorize-red">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
</defs>
<g filter="url(#colorize-red)">
<path d="M0 0h24v24H0z" />
</g>
</svg>
```
3. Используйте JavaScript:
- Используйте JavaScript для изменения атрибута `fill` каждого элемента с помощью методов DOM.
- Назначьте уникальные идентификаторы (ID) для нужных элементов и используйте JavaScript, чтобы найти эти элементы и изменить их свойства.
Пример JavaScript:
```javascript
const elements = document.querySelectorAll('.my-icon path');
elements.forEach((element) => {
element.setAttribute('fill', 'red');
});
```
- Что касается svg-sprite-loader, вы можете изменить цвет иконок, используя любой из вышеперечисленных методов. Вам просто нужно выбрать подходящий для вашего случая способ и кодировать его соответствующим образом.