Question

我有一个带有100多个图标的预制svg子画面：

<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中的所有图标之后将其插入页面标记中：

包括您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 Sprite？

3 个答案: