Как поместить все svg иконки в 1 файл и вытаскивать в код по адресу?

Question

[lekseykorolev]

В шаблоне используются различные иконки svg в html формате, с разных наборов, с разными начеретаниями и тп, какие есть способы собрать все иконки в 1 файл и дергать их по адресу или через тег i ?

Comments

[Ankhena]

Спрайты/стеки https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
Спрайты - устаревший вариант. Но норм, если собираетесь использовать только в разметке.
Стеки - современный вариант, можно использовать где угодно.

[Максим]

Ankhena, поддержка у стеков не ахти...

[Ankhena]

Максим, для кого?

[Максим]

Ankhena, вообще, стэки не очень поддерживаются

[Ankhena]

Максим, Максим, кем они не очень поддерживаются? Использую их уже несколько лет.

Answer 1

[Rsa97]

https://habr.com/ru/articles/276463/

Answer 2

[Антон Антон]

Это называется 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.