Как настроить веб-пакет для использования готового svg-спрайта?

Question

У меня есть встроенный svg-спрайт с более чем 100 значками:

<svg xmlns="http://www.w3.org/2000/svg" style="visibility:hidden; width:0; height:0;">
    <symbol id="icon--web" viewBox="0 0 70 100">...</symbol>
    ...
</svg>

Как настроить веб-пакет для использования такого спрайта таким простым способом?:

<svg class="icon icon--web">
    <use xlink:href="../../images/sprite.svg#icon--web"></use>
</svg>

Большинство плагинов ( svg-spritemap-webpack-plugin , svg-sprite-loader ) предназначены для создания спрайтов из многих изображений SVG,однако я не нашел, как настроить их для использования ранее созданного спрайта.

Answer 1

Самый простой способ ссылки на файл SVG без каких-либо преобразований - это обрабатывать его как статический ресурс. Поместите файл svg в каталог статических ресурсов и скопируйте его, когда вы упаковываете исходный код. Вы можете достичь этого, используя copy-webpack-plugin. Ниже приведен пример установки в webpack.config.js:

const CopyPlugin = require('copy-webpack-plugin');

// ...

plugins: [
  new CopyPlugin([
    {
      from: './src/static/assets/sprite.svg',
      to: 'static/assets', // relative path in output directory
    }
  ])
]

Как только вы успешно скопируете файл svg в папку статических ресурсов, вы можете ссылаться на него, как вы делали это в приведенном выше коде.

Answer 2

Итак, вот мое решение для webpack4.Это приводит к тому, что svg sprite включается в код приложения javascript и вставляется в разметку страницы после открытия тега body, и все значки из спрайта успешно загружаются:

1. Включить путь спрайта к вашемуindex.js файл:

   // index.js
   import '../images/_sprite.svg';
   

2. Добавить правило в конфигурацию webpack (используйте svg-sprite-loader ):

   {
       test: /\.svg$/i,
   
       // from all svg images
       // include only sprite image
       include: /.*_sprite\.svg/,
   
       use: [
           {
               loader: 'svg-sprite-loader',
               options: {
                   publicPath: '',
               }
           },
       ],
   },
   
   

3. Включить плагин svg-sprite-loader в конфигурации вашего веб-пакета:

   const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
   
   // ...
   plugins: [
       // ...
       new SpriteLoaderPlugin()
   ]
   

4. Использовать следующую HTML-разметку в вашем html:

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

   Обратите внимание, что путь спрайта удален и добавлена ​​строка _sprite_.