Как правильно собрать SVG-спрайт в webpack?

Для сборки SVG-спрайтов в webpack можно использовать различные инструменты и плагины. Рассмотрим один из наиболее популярных вариантов - использование плагина svg-sprite-loader.

svg-sprite-loader является загрузчиком для webpack, который преобразует несколько SVG-файлов в один спрайт и генерирует специальный модуль, содержащий пути к каждому символу в спрайте.

Для начала, установите пакет svg-sprite-loader:

npm install svg-sprite-loader --save-dev

Затем, добавьте загрузчик в конфигурационный файл webpack (например, webpack.config.js):

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: 'sprite.svg' // имя выходного файла спрайта
        }
      }
    ]
  },
  // ...
};

Теперь, когда webpack будет обрабатывать файлы с расширением ".svg", svg-sprite-loader будет автоматически преобразовывать их в спрайт.

Для использования спрайта в вашем коде, вам необходимо импортировать спрайт в соответствующий модуль:

import sprite from './sprite.svg';

Затем, вы можете использовать символы из спрайта просто указывая их имена:

<svg>
  <use href="#icon-name"></use>
</svg>

Где "#icon-name" - это идентификатор символа в спрайте, который вы хотите использовать.

Svg-sprite-loader также предоставляет дополнительные возможности, такие как конфигурация опции "symbolId", которая позволяет настраивать идентификаторы символов. Также вы можете настроить извлечение спрайта в отдельный файл или инлайнинг символов.

Благодаря использованию svg-sprite-loader вы можете эффективно управлять SVG-спрайтами в вашем проекте, уменьшая количество запросов к серверу и обеспечивая масштабируемость и гибкость в работе с SVG-графикой.