将选项从 svgr/webpack 传递给内置 svgo

Question

是否有一个选项可以将 svgo 选项传递给 svgr/webpack 加载器？我想删除宽度和高度属性并保留视图框，默认情况下它会删除这些属性。

{
    test: /\.svg$/,
    use: ['@svgr/webpack'],
    options : {
    svgo: { // Something like this ?
        mergePaths: false,
        removeViewbox: false,
        removeAttrs: true,
    }}

},

Answer 1

就我而言，我遇到的错误是：

1. plugins应该是一个数组；
2. 每个插件对象都需要一个name属性

所以这对我有用：

use: {
 loader: '@svgr/webpack',
 options: {
  svgoConfig: {
   plugins: [
    {
      name: 'removeViewBox',
      active: false
    }
   ]
  }
 }
}

Answer 2

我今天遇到了这个问题，@dimitar-spassov的答案似乎很有希望，但是此后某些事情可能会发生变化，因为 viewBox 仍然被删除。

提到的向 svgo 传递选项仍然是正确的，如此处所述。

我在这里找到了 svgo 的正确配置。

总而言之，对我有用的看起来像这样：

{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false
                },
              },
            },
          ]
        }
      }
    },
  ],
}

Answer 3

我找不到通过 svgr 将参数传递给 svgo 的方法，所以我切换到了react-svg-loader有关于如何实现这一目标的文档：

{
    test: /\.svg$/,
    use: [
        'babel-loader',
        {
            loader: 'react-svg-loader',
            options: {
                svgo: {
                    plugins: [{ removeDimensions: true, removeViewBox: false }],
                    floatPrecision: 2,
                },
            },
        },
    ],
},