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

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 图像构建 sprite，但是我没有找到如何配置它们以使用早期构建的 sprite。

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 中的所有图标：

将 sprite 路径包含到您的 index.js 文件：
```
// index.js
import '../images/_sprite.svg';
```

向 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: '',
            }
        },
    ],
},

在您的 webpack 配置中启用 svg-sprite-loader 插件：

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

// ...
plugins: [
    // ...
    new SpriteLoaderPlugin()
]

在 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，标记应该会按照您的预期工作！

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

How to configure webpack to use a prebuilt svg sprite?

html

css

svg

webpack

svg-sprite