Как создать 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

Answer 3

[real-name]

Я всё-таки решил остаться с плагином vite-svg-sprite-wrapper.
Только для ожидаемой работы в production-режиме нужно прибегнуть к ещё одному плагину, а именно vite-plugin-static-copy. vite.vonfig.js выглядит так:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ViteSvgSpriteWrapper from 'vite-svg-sprite-wrapper';
import viteStaticCopy from 'vite-plugin-static-copy';
import path from 'path'

export default defineConfig({
  base: './',
  resolve: {
    alias: {'@': path.resolve(__dirname, './src')},
  },
  plugins: [
    vue(),
    ViteSvgSpriteWrapper({
      outputDir: 'src/assets',
    }),
    viteStaticCopy({
      targets: [
        {
          src: 'src/assets/sprite.svg',
          dest: 'assets',
        },
      ],
    }),
  ],
})

Я создал компонент SvgIcon.vue:

<template>
  <svg :width="width" :height="height">
    <use :href="`/assets/sprite.svg#${name}-${width}`"></use>
  </svg>
</template>

<script>

export default {
  name: 'svg-icon',
  props: {
    name: {
      type: String,
      required: true,
    },
    width: {
      type: Number,
      default: 32,
    },
    height: {
      type: Number,
      default: 32,
    },
  },
}
</script>