Да, можно использовать SVG-спрайты в качестве фона для псевдоэлементов. Вот как это можно сделать:
1. Создайте SVG-спрайт, объединяющий все нужные иконки или элементы в одном файле.
2. Вставьте этот спрайт в разметку вашей страницы.
3. Используйте псевдоэлементы (::before или ::after) и добавьте стиль для задания фона.
Пример кода:
HTML:
```html
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="icon1" viewBox="...">
<!-- ваш код для первой иконки -->
</symbol>
<symbol id="icon2" viewBox="...">
<!-- ваш код для второй иконки -->
</symbol>
</svg>
```
CSS:
```css
.element::before {
content: '';
display: inline-block;
width: 24px; /* задайте нужную ширину и высоту */
height: 24px;
background-image: url(svg-sprite.svg); /* замените на путь к вашему svg спрайту */
background-size: 100%;
background-repeat: no-repeat;
}
.element.icon1::before {
background-position: 0 0; /* задайте координаты иконки в спрайте */
}
.element.icon2::before {
background-position: -24px 0; /* задайте координаты второй иконки в спрайте */
}
```
В этом примере `.element` - это селектор элемента, к которому нужно добавить фон с помощью псевдоэлемента. Вы также можете добавить разные классы для разных иконок или использовать другие методы для выбора нужного элемента.
Не забудьте заменить `svg-sprite.svg` на путь к вашему SVG-спрайту и настроить координаты иконок в спрайте в соответствии с вашими требованиями.