Как можно использовать svg спрайт в псевдоэлементах?
Да, можно использовать 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-спрайту и настроить координаты иконок в спрайте в соответствии с вашими требованиями.
Нужно сделать так называемый стек из svg, а не символьный спрайт. <br/> И его можно вставлять куда угодно, как обычно в use или в img или в CSS (псевдо, фоны, маски...). <br/> <a href="https://telegra.ph/Stack--sprajt-zdorovogo-cheloveka-11-01" rel="nofollow">https://telegra.ph/Stack--sprajt-zdorovogo-chelove...</a> <br/> <br/> Если вы имеете в виду вставку непосредственно в свойство content псевдоэлемента, то да, тоже можно, но прямо скажем неудобно потом с этим работать. Но это верно и для всего остального, отличного от текста.