1

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

我从互联网上找到了以下解决方案......但它们都不起作用，而且我总是viewBox从svg.

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

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

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

config.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 解决方案，我觉得它只是没有选择给定的文件，因为如果我将提供错误的文件位置（或某些不存在的文件位置），它的工作方式与默认情况完全相同（我的期望是有一个错误类似...提供的文件错误）。

4

2 回答 2

2

使用 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',
        },
    ]
},
于 2021-09-28T11:54:12.987 回答
0

无需svgo-loader在 webpack 配置中传递任何选项。只需将根目录下的默认配置与微调加载程序所需的选项一起传递给我。确保将其命名svgo.config.js为这个文件，该文件将由svgo选项中加载...就像我们如何为其他东西（如更漂亮、ts 等）传递配置文件一样。

webpack.config.js

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

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

  const { extendDefaultPlugins } = require('svgo');

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

感谢@trySound的帮助！

于 2021-08-13T11:30:08.137 回答