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

【问题标题】：Pass options to the builtin svgo from svgr/webpack从 svgr/webpack 将选项传递给内置 svgo
【发布时间】：2021-01-30 04:46:53
【问题描述】：

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

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

},

【问题讨论】：

标签： svg webpack svgo

【解决方案1】：

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

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

所以这对我有用：

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

【讨论】：

【解决方案2】：

嵌套参数的语法有点混乱。这是我用来禁用前缀 ID 和类名的方法。我想，在你的情况下，它将类似于mergePaths.active = false、removeViewbox.active = false。

loader: '@svgr/webpack',
    options: {
        svgoConfig: {
            plugins: [{
                prefixIds: {
                    prefixIds: false,
                    prefixClassNames: false
                }
            }]
     }
}

我没有测试，但我想它看起来像这样（或类似的，你可能会稍微玩一下以获得正确的语法）：

loader: '@svgr/webpack',
    options: {
        svgoConfig: {
            plugins: [{
                removePaths: {
                    active: false,
                }
            },{
                removeViewbox: {
                    active: false,
                }
            },{
                removeAttrs: {
                    active: true,
                }
            }]
     }
}

查看此处的代码，您可以在其中找出实际导出的道具：https://github.com/svg/svgo

【讨论】：

我刚刚切换了 svgr，因为没有任何关于如何将参数传递给 svgo 的文档。另一方面，react-svg-loader 有文档并且工作方式相同，所以我建议人们使用它
我觉得svgr的doco挺好的，随便玩玩就行了。您必须考虑它是免费和开源的，因此作者是在他/她的空闲时间做的。我在做决定时也在看react-svg-loader，但svgr 对我来说效果更好。但确实我必须从代码中找出一些东西，因为它们在文档中没有详细描述。

【解决方案3】：

https://react-svgr.com/docs/options/

答案如下... { 加载器：“@svgr/webpack”，选项： { 尺寸：假 } },

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

它按照here 或here 的描述工作：

{
  test: /\.svg$/,
  use: [{
    loader: '@svgr/webpack',
    options: { 
      svgoConfig: {
        plugins: [
          { mergePaths: false },
          { removeViewbox: false },
          { removeAttrs: true },
        ],
      },
    },
  }],
}

【讨论】：