Уже давно все иконки на сайте используют в SVG формате. Это современно, адаптивно и удобно.
Но что делать если svg иконок много? Как использовать спрайты на примере обычных растровых изображений мы уже знаем. Просто соединяем много иконок в одну картинку и выбираем нужный участок картинки через background-position.
В случае с SVG самым быстрым способом будет воспользоваться этим сервисом.
Создание SVG спрайта
1. Итак, заходим на SVG Sprit
2. Перетаскиваем нужные SVG иконки прям на страницу
3. Получаем код спрайта и код ссылок на иконки, проверяем что количество иконок совпадает с изначальным (сервис имеет свойство тупить).
4. Нажимаем Download Sprite и закидываем этот файл в папку нашего проекта.
5. Готово, можем использовать эти иконки.
И в случае с SVG спрайтами все действительно намного проще, для того чтобы иконка показалась тегом svg, делаем так:
Где icon - идентификатор иконки в рамках спрайта.
Если нам нужна конкретная иконка в теге img, пишем такое:
И аналогично с CSS фоном:
Не забывайте указывать размер SVG иконки, так как в стилях её может разнести на весь блок.
Подписывайся на канал, я только начал 🦥
#svg #frontend #веб-разработка #html #верстка сайтов