6

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

4

3 回答 3

3

所以这是我对 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_字符串被添加。

于 2019-05-18T11:06:31.380 回答
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 文件复制到静态资产文件夹后，您可以像在上面的代码中那样引用它。

于 2019-05-17T23:52:22.250 回答
0 
module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          attributes: {
            list: [
              {
                tag: 'use',
                attribute: 'xlink:href',
                type: 'src',
              },
            ]
          },
        }
      },

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

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

于 2020-06-06T03:10:42.480 回答