@whireless

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

Всем привет, как правильно собрать спрайт, чтобы он попал и в 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.
6512e6e0d3381526365016.png
6512e77376171384825943.png

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

Тут все куда проще - спрайт собирается и работает, но только в dev-режиме. Настроек нужных для этого плагина на npmjs не нашел.
  • Вопрос задан
  • 1166 просмотров
Решения вопроса 1
@whireless Автор вопроса
Нашел решение в плагине - vite-plugin-svg-spriter, с ним все шикарно работает, инлайнит svg в самый конец body, и просто по id подключаюсь. И в dev и в build версии все работает. Изначально конечно был поиск плагина для сбора спрайта именно в виде отдельного файла, но и этот способ тоже хорош.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Я использую vite-plugin-svg-sprite с настройками
{
            symbolId: 'icon-[name]-[hash]',
            include: ['**/icons/**.svg', '**/icons/sections/**.svg']
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы