Как подружить webpack 5 и sprite.svg?

Для интеграции спрайтов SVG с помощью Webpack 5 вам понадобятся некоторые дополнительные модули и настройки. Процесс включает следующие шаги:

Шаг 1: Установка необходимых модулей
При работе с Webpack 5 необходимо установить два основных модуля: svg-sprite-loader и html-webpack-plugin:

npm install --save-dev svg-sprite-loader html-webpack-plugin

Шаг 2: Настройка webpack.config.js
В файле webpack.config.js необходимо добавить следующую конфигурацию:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...другая конфигурация Webpack...
  
  module: {
    rules: [
      // ...другие правила загрузки...
      
      {
        test: /.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]' // опционально, задает префикс для идентификаторов символов
        }
      }
    ]
  },
  
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

Шаг 3: Создание спрайта
Теперь вы можете создать файл спрайта в SVG-формате (например, в src/assets/sprite.svg) и добавить в него все нужные вам иконки в виде отдельных символов <symbol>. Например:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M12 ..."></path>
  </symbol>
  
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M8 ..."></path>
  </symbol>
  
  <!-- дополнительные символы -->
</svg>

Шаг 4: Использование спрайта
Теперь вы можете использовать спрайт в вашем коде, указывая иконке нужный идентификатор символа. Например:

<svg class="icon">
  <use xlink:href="#icon-home"></use>
</svg>

При сборке Webpack автоматически обработает все файлы SVG, найденные с помощью правила test: /.svg$/, создаст спрайт и подключит его к вашему HTML-файлу с помощью плагина html-webpack-plugin.

Таким образом, вы успешно подружили Webpack 5 с спрайтом SVG. Вы можете добавлять новые иконки в спрайт, изменять его и использовать его в вашем проекте без необходимости вручную обрабатывать каждую иконку.