Как поместить все svg иконки в 1 файл и вытаскивать в код по адресу?
В шаблоне используются различные иконки svg в html формате, с разных наборов, с разными начеретаниями и тп, какие есть способы собрать все иконки в 1 файл и дергать их по адресу или через тег i ?
Дополнительно:
Спрайты/стеки https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
Спрайты - устаревший вариант. Но норм, если собираетесь использовать только в разметке.
Стеки - современный вариант, можно использовать где угодно.
Ответы:
https://habr.com/ru/articles/276463/
Это называется svg sprite, надо просто дергать не через тег i, а через svg use:
https://siteok.org/blog/html/svg-sprajty
Для получения спрайта из файлов и даже встраивания в html есть куча готовых инструментов, встраивающихся в конвеер сборки, какой использовать - зависит от того, что вы используете, gulp, webpack, vite или что-то еще.
Лично я использую https://github.com/meowtec/vite-plugin-svg-sprite так как делаю приложения с использованием vue, по ссылке выше есть вариант для gulp.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для объединения всех SVG иконок в один файл и извлечения их в коде по адресу, вы можете воспользоваться техникой спрайтов SVG. Этот подход позволяет уменьшить количество HTTP-запросов к серверу и улучшить производительность загрузки страницы.
Для начала вам необходимо создать файл-спрайт, в который вы поместите все ваши SVG иконки. Вы можете сделать это вручную, объединив код всех SVG в один файл, или воспользоваться специальными инструментами, такими как SVGO или SVG-sprite.
Пример кода для создания спрайта SVG:
<!-- код SVG иконки 1 --> <!-- код SVG иконки 2 --> <!-- добавьте другие иконки по аналогии --><!-- код SVG иконки 1 --> <!-- код SVG иконки 2 --> <!-- добавьте другие иконки по аналогии -->
После того, как у вас есть файл-спрайт со всеми иконками, вы можете вставить нужную иконку на страницу, используя тег и указав id нужной иконки в атрибуте xlink:href:
Таким образом, вы можете легко добавлять иконки на вашу страницу, обращаясь к ним по id в файле-спрайте. Кроме того, спрайты SVG позволяют применять стили к иконкам с помощью CSS, что делает их более гибкими и удобными для использования.