如何配置 webpack 以使用预构建的 svg sprite？

Question

我有一个包含 100 多个图标的预构建 svg sprite：

<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>

如何以这种简单的方式配置 webpack 以使用这样的精灵？ ：

<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 标记后插入到页面标记中，并且成功加载了 sprite 中的所有图标：

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. 在你的 webpack 配置中启用 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_字符串被添加。

Answer 3

module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          attributes: {
            list: [
              {
                tag: 'use',
                attribute: 'xlink:href',
                type: 'src',
              },
            ]
          },
        }
      },

      {
        test: /\.svg$/,
        use: 'file-loader'
      }
    ]
  }

您可以按照以下方式配置 webpack，标记应该可以按照您的预期工作！