将选项从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

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

答案是

{
loader: "@svgr/webpack",
options: {
dimensions: false
}
},

Answer 3

我今天遇到了这个问题，@dimitar spassov的回答似乎很有希望，但后来可能发生了变化，因为viewBox仍然被删除了。

上面提到的将选项传递给svgo仍然是正确的，正如这里所提到的。

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

总而言之，对我有用的东西是这样的：

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

Answer 4

它的嵌套参数语法有点混乱。以下是我用来禁用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

Answer 5

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

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

Answer 6

按此处或此处所述工作：

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

Answer 7

如果您使用Next.js，请按照以下步骤配置SVG优化：

1. 在Next.js项目的根目录中，创建一个名为svgo.config.js的文件，其中包含以下内容。

   // svgo.config.js
   module.exports = {
   plugins: [
   {
   name: 'preset-default',
   params: {
   overrides: {
   removeViewBox: false,
   // Customize default plugin options here if needed
   },
   },
   },
   ],
   };
   

2. 打开您的终端并使用以下命令运行Next.js项目的开发服务器：

   npm run dev
   

3. 当您的开发服务器正在运行时，请在web浏览器中访问您的应用程序，任何SVG图像现在都应该保留其viewBox属性。

4. 如果这个解决方案对你有帮助，可以考虑支持投票来帮助Next.js用户。