Как создать SVG-спрайт в сборщике ViteJS?

Question

[whireless]

Всем привет, как правильно собрать спрайт, чтобы он попал и в dev-сборку и в build-сборку?
Нашел пару плагинов для Vite:

1. ViteSvgSpriteWrapper
   
2. VitePluginSvgSpritemap
   

____________________________________________________________________________________________
Настройки для ViteSvgSpriteWrapper -

ViteSvgSpriteWrapper({
  icons: 'src/icons/*.svg',
  outputDir: 'public/img',
}),

Если собрать спрайт в папку src или в public, то в dev иконки работают как положено, а вот в папку build (она же dist по-умолчанию) спрайт падает тоже, но абсолютно пустой. На 1м скрине пустой в build, а на 2м нормальный собранный спрайт в public.



Можно конечно настроить чтобы спрайт падал сразу в папку build, но в таком случае уже в dev-режиме не будет спрайта.
____________________________________________________________________________________________
Настройки для VitePluginSvgSpritemap -
VitePluginSvgSpritemap('./src/icons/*.svg'),

Тут все куда проще - спрайт собирается и работает, но только в dev-режиме. Настроек нужных для этого плагина на npmjs не нашел.

Answer 1

[whireless]

Нашел решение в плагине - vite-plugin-svg-spriter, с ним все шикарно работает, инлайнит svg в самый конец body, и просто по id подключаюсь. И в dev и в build версии все работает. Изначально конечно был поиск плагина для сбора спрайта именно в виде отдельного файла, но и этот способ тоже хорош.

Answer 2

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

Я использую vite-plugin-svg-sprite с настройками

{
            symbolId: 'icon-[name]-[hash]',
            include: ['**/icons/**.svg', '**/icons/sections/**.svg']
}

все работает, добавляет импорты по совпадающим путям в sprite, остальные импорты не трогает.

Comments

[whireless]

Попробовал, не помогло, вроде сборка идет и dev и build, но сам спрайт даже не появляется нигде

[whireless]

Ни в assets ни уровнем выше нету спрайта, везде облазил посмотрел

[whireless]

Я кажется понял в чем проблема. Мне нужно не через импорты в js. Вот какая суть - есть папка с иконками svg, надо чтобы они все собрались в один спрайт и все, и уже из html я в нужных местах обращаюсь через тег вставляя там иконки в соответствии их id (id я прописываю заранее в каждом svg до сборки в спрайт)

[whireless]

Подскажи плз, в чем тут ошибка?
Создал отдельный js-файл для импорта svg, вот на скрине видно что я решил заимпортить 2 иконки из папки icons, почему он создает в assets 2 svg с этими же самыми иконками, а не 1 спрайт в котором и будут обе иконки?

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

whireless, это значит что не подходит путь к настройкам плагина и vite делает мимо него.

вообще этот плагин в index html вставляет спрайт генерируемым скриптом, а не делает отдельный файл.

[whireless]

Антон Антон, правильно понимаю, что он вставляет в index.html 1 свг (он же спрайт) в указанном мною месте, и после уже в этом же index я смогу обращатся к этому спрайту вытягивая иконки?

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

whireless, да, примерно так. только вставляет он сам, место указывать не надо. А потом использовать можно по id, этот id также генерится плагином по формату.

но лучше, конечно, id получать через import.

[whireless]

Антон Антон, Понял, спасибо, попробую этот inline-метод. До этого через единый svg-файл всегда делал спрайт

[whireless]

Антон Антон, Приветствую, не хочет собираться спрайт все равно, может у меня что-то с путями не так? Хотя вроде все попробовал менять, и папки, и названия папок, и иконки сами перекидывал в другие места.
Вот настройки -


Вот структура -

[whireless]

Антон Антон, Другой плагин нашел, и он решил мою проблему - vite-plugin-svg-spriter