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

@deion 

Для подключения SVG спрайта в HTML и CSS нужно выполнить следующие шаги:

1. Создать файл sprite.svg, в котором будут храниться все SVG-иконки для спрайта.
2. В HTML, в месте, где вы хотите вставить иконку из спрайта, используйте тег : В этом примере, icon - это класс, который вы можете использовать для стилизации иконки в CSS, а icon-name - это ID, который соответствует нужной вам иконке в спрайте. Обратите внимание, что путь к sprite.svg и #icon-name должен быть правильным.
3. В CSS вы можете стилизовать иконку, используя класс .icon или другой класс, который вы задали в HTML. Например: .icon { width: 24px; height: 24px; fill: #000; } В этом примере, иконка будет иметь размер 24x24 пикселя и будет заполнена черным цветом (#000).
4. Теперь ваши иконки из спрайта должны быть видны на вашей HTML-странице и вы можете стилизовать их с помощью CSS.

@deion 

Если у вас уже есть файл спрайта, вы можете загрузить его в свою страницу HTML следующим образом:

1. Создайте тег

1
2
3
4
5
6
7
8

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-name1" viewBox="0 0 24 24">
    <path d="M12 3l8 9H4z"/>
  </symbol>
  <symbol id="icon-name2" viewBox="0 0 24 24">
    <path d="M12 3l8 9H4z"/>
  </symbol>
</svg>

1. Затем, для отображения конкретной иконки на вашей странице, используйте тег :href и ссылкой на нужный символ (иконку):

1
2
3

<svg class="icon">
  <use xlink:href="#icon-name1"/>
</svg>

1. В CSS вы можете стилизовать иконку, используя класс .icon или другие классы, назначенные вашему тегу

1
2
3
4
5

.icon {
  width: 24px;
  height: 24px;
  fill: #000;
}

Теперь ваш файл спрайта SVG успешно подключен к вашей HTML-странице, и вы можете добавлять и стилизовать иконки из спрайта с помощью CSS.