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

Для создания SVG-спрайта в сборщике ViteJS вам понадобится добавить несколько пакетов и настроить конфигурацию.

1. Установка необходимых пакетов.
Для начала, вам потребуется установить следующие пакеты:

   npm install -D vite-plugin-svg-icons 
                  svgo 
                  html-webpack-inline-svg-plugin

Первый пакет, vite-plugin-svg-icons, является основным плагином, который позволяет вам создавать SVG-спрайты в ViteJS. Второй пакет svgo используется для оптимизации SVG-файлов. Третий пакет html-webpack-inline-svg-plugin добавляется для внедрения SVG-спрайта в HTML.

2. Настройка конфигурации.
В файле vite.config.js (или vite.config.ts для TypeScript) необходимо добавить следующий код:

   import svgIcons from 'vite-plugin-svg-icons';

   export default {
     // ...
     plugins: [
       svgIcons({
         iconDirs: ["/src/icons"], // Папка, содержащая ваши SVG-файлы
         symbolId: "icon-[name]", // Префикс символа для каждого SVG-файла
       }),
     ],
     // ...
   };

Здесь мы используем плагин vite-plugin-svg-icons и настраиваем его с помощью параметров. iconDirs указывает папку, в которой будут находиться ваши SVG-файлы. symbolId задает префикс символа для каждого SVG-файла, чтобы избежать конфликтов имен.

3. Создание SVG-спрайта.
Теперь вы можете создать SVG-спрайт, поместив SVG-файлы в папку src/icons (или ту, которую вы указали в iconDirs).

Например, создайте файл logo.svg в папке src/icons:

   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <circle cx="12" cy="12" r="10" fill="#000"/>
   </svg>

При добавлении новых SVG-файлов или изменении существующих, ViteJS автоматически обновляет SVG-спрайт.

4. Использование SVG-спрайта.
После создания SVG-спрайта, вы можете использовать его в своем коде:

   import { getSvgIcon } from 'vite-plugin-svg-icons/iconify';

   const logoIcon = getSvgIcon("icon-logo");

   const app = document.querySelector("#app");
   app.innerHTML = `
     <div>${logoIcon}</div>
   `;

Когда вы вызываете функцию getSvgIcon с именем символа, она вернет вам SVG-код для данного символа. Вы можете использовать этот SVG-код в вашем коде как угодно.

5. Опциональная оптимизация SVG-файлов.
Если вы хотите оптимизировать SVG-файлы, добавьте следующую настройку в ваш файл vite.config.js:

   import { SVGO_DEFAULTS } from 'vite-plugin-svg-icons';

   export default {
     // ...
     plugins: [
       svgIcons({
         // ...
         svgoConfig: {
           plugins: [...SVGO_DEFAULTS.plugins], // Список плагинов по умолчанию
         },
       }),
     ],
     // ...
   };

Это применит настройки оптимизации по умолчанию к SVG-файлам.

Вот и все! Теперь вы знаете, как создать SVG-спрайт в сборщике ViteJS.