Можно ли использовать svg спрайты в качестве фона для псевдоэлементов?

Как можно использовать svg спрайт в псевдоэлементах?
  • 2 января 2024 г. 16:57
Ответы на вопрос 2
Да, можно использовать 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, а не символьный спрайт. 
И его можно вставлять куда угодно, как обычно в use или в img или в CSS (псевдо, фоны, маски...).
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

Если вы имеете в виду вставку непосредственно в свойство content псевдоэлемента, то да, тоже можно, но прямо скажем неудобно потом с этим работать. Но это верно и для всего остального, отличного от текста.
Похожие вопросы