Как подключить svg спрайт в файл в html и css?

@abel 

Для подключения SVG спрайта в HTML и CSS можно использовать тег <svg> и CSS-свойство background-image.

Шаги для подключения SVG спрайта:

1. Создайте файл со спрайтом, содержащим несколько SVG-изображений.
2. Вставьте содержимое файла со спрайтом в тег <svg> внутри тега <symbol>:

1
2
3
4
5
6
7
8

<svg>
  <symbol id="icon-1" viewBox="0 0 24 24">
    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM9 16.2L5.8 13c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l2.3 2.3L16.6 8c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.4 16.2c-.4.4-1 .4-1.4 0z"/>
  </symbol>
  <symbol id="icon-2" viewBox="0 0 24 24">
    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM16 15c-.4 0-.7-.1-1-.4l-4-4c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0l2.3 2.3 4.6-4.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1l-5.6 5.6c-.3.3-.6.4-1 .4z"/>
  </symbol>
</svg>

1. Вставьте ссылку на спрайт в ваш HTML-файл с помощью тега <use>, указав идентификатор символа из спрайта и размеры элемента:

1
2
3

<svg width="24" height="24">
  <use xlink:href="#icon-1"></use>
</svg>

1. Добавьте стили для спрайта в ваш файл CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

svg {
  display: none;
}

.symbol {
  fill: currentColor;
  display: inline-block;
  height: 1em;
  width: 1em;
}

1. Для использования спрайта в качестве фона элемента добавьте следующие CSS-свойства:

1
2
3
4

.icon {
  background-image: url('sprite.svg');
  background-repeat: no-repeat;
}

где 'sprite.svg' - это путь к вашему файлу со спрайтом.

1. Для использования конкретного символа из спрайта в качестве фона элемента, используйте свойство background-position, указав координаты символа в спрай

@abel 

те:

1 2 3 4 5 6 7 8

.element1 { background-image: url('sprite.svg'); background-repeat: no-repeat; background-position: 0 0; /* координаты первого символа в спрайте */ }

.element2 { background-image: url('sprite.svg'); background-repeat: no-repeat; background-position: -24px 0; /* координаты второго символа в спрайте */ }

Готово! Теперь у вас есть спрайт SVG, который можно подключить и использовать в вашем HTML и CSS коде.