Как можно создать SVG-спрайт с помощью инструмента ViteJS?

Question

Тихон

сборка , javascript

Как можно создать SVG-спрайт с помощью инструмента ViteJS?

Как правильно настроить плагин для сборки спрайта так, чтобы он работал как в dev-сборке, так и в build-сборке? У меня есть два плагина для Vite - ViteSvgSpriteWrapper и VitePluginSvgSpritemap. При использовании ViteSvgSpriteWrapper спрайт работает правильно в dev-режиме и в папке src или public, но выводится пустым в папке build (или dist). При использовании VitePluginSvgSpritemap спрайт собирается и работает только в dev-режиме, и я не нашел соответствующих настроек для этого плагина на npmjs. Как можно решить данную проблему?

26 сентября 2023 г. 14:37

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для создания SVG-спрайта с использованием инструмента ViteJS можно использовать плагин ViteSvgSpriteWrapper. Он позволяет создать спрайт из SVG-файлов, расположенных в заданной директории.

Чтобы правильно настроить этот плагин и чтобы он работал как в dev-сборке, так и в build-сборке, вам может потребоваться внести следующие изменения в ваш конфигурационный файл Vite (vite.config.js):

1. Установите плагин ViteSvgSpriteWrapper:

```bash
npm install vite-svg-sprite-wrapper --save-dev
```

2. Импортируйте и добавьте плагин в ваш конфигурационный файл (vite.config.js):

```javascript
const svgSpriteWrapper = require('vite-svg-sprite-wrapper');

module.exports = {
  plugins: [
    svgSpriteWrapper({
      symbolId: 'icon-[dir]-[name]',
      outputPath: 'assets/sprite/', // Папка, куда будет сохранен спрайт
      publicPath: '/assets/sprite/', // Публичный путь к спрайту
      include: [/\.svg$/], // Включить только SVG-файлы
    }),
  ],
};
```

3. Убедитесь, что ваш файл конфигурации задан правильно и включает в себя любые другие необходимые плагины.

После этого, плагин будет создавать спрайт SVG-иконок в заданной папке (outputPath), а публичный путь (publicPath) будет использоваться для обращения к спрайту в вашем приложении.

Важно отметить, что папка, в которой находятся ваши SVG-файлы, должна быть доступна для сборки Vite (например, находиться внутри папки src или public).

Это должно решить вашу проблему и позволить создать SVG-спрайт с помощью инструмента ViteJS в обоих режимах - dev и build.

Answer 2

Я использую плагин vite-plugin-svg-sprite с такими настройками: 
{
    symbolId: 'icon-[name]-[hash]',
    include: ['**/icons/**.svg', '**/icons/sections/**.svg']
}
Он работает, конвертируя импорты в спрайты только при импорте по указанным путям, не затрагивая остальные импорты.