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

Пользователь

от deion , в категории: HTML/CSS , 10 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от vladimir , 9 месяцев назад

@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.

Пользователь

от ella , 2 месяца назад

@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.