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