无法配置svgo-loader (webpack)

Question

我使用svgo-loader来优化svg图像，它使用默认配置。我想添加一些自定义配置，比如我不想从svg中删除viewBox，因为它使得定义svg的尺寸非常困难。

我从网上找到了以下解决方案…但它们都不工作，我总是从svg中删除viewBox。

{
loader: 'svgo-loader',
options: {
plugins: [{
removeViewBox: false
}]
}
}

{
loader: 'svgo-loader',
options: {
externalConfig: "svgo-config.yml"
}
}

{
loader: 'svgo-loader',
options: {
configFile: './svgo.config.js'
}
}

配置内容。yml文件

plugins:
- removeTitle: false
- remoViewBox: false

svgo.config.js内容

const { extendDefaultPlugins } = require('svgo');
module.exports = {
plugins: extendDefaultPlugins([
{
name: 'removeTitle',
active: false
},
{
name: 'removeViewBox',
active: false
},
])
};

对于configFile解决方案，我觉得它只是不选择给定的文件，因为如果我提供错误的文件位置(或一些不存在的文件位置)，它的工作原理与默认情况完全相同(我的期望是有一个错误的东西像…文件提供错误)。

Answer 1

使用svgo-loader v3.0.0(使用svgo v2.4.0或更新版本):

在根项目文件夹中创建svgo.config.js，内容如下:

module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
};

在webpack.config.js

{
test: /.svg$/i,
use: [
{
loader: 'file-loader',
},
{
loader: 'svgo-loader',
},
]
},

Answer 2

不需要在webpack配置中传递svgo-loader的任何选项。只需在根目录下传递默认配置，并使用微调加载器所需的选项即可。确保它被命名为svgo.config.js，因为这个文件将被svgo选中用于加载选项…这很像我们传递配置文件给其他东西，如prettier, ts等。

webpack.config.js

{
test: /.svg$/i,
use: [
{
loader: 'file-loader',
},
{
loader: 'svgo-loader',
},
]
},

这是我的svgo.config.js，因为我只需要保留我的SVG上的viewBox属性，我已经添加了…你可以使用这个完整的列表作为参考。

const { extendDefaultPlugins } = require('svgo');
module.exports = {
plugins: extendDefaultPlugins([
{
name: 'removeViewBox',
active: false
},
])
};

谢谢你的帮助@trySound!