无法配置 svgo-loader (webpack)

Question

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

我从互联网上找到了以下解决方案...但其中 none 有效，而且我总是从 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'
            }
          }

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

Answer 1

无需在 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 属性我已经添加了......你可以使用这个 complete list 作为参考.

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

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

感谢您的帮助@trySound！

Answer 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',
        },
    ]
},

无法配置 svgo-loader (webpack)

Unable to configure svgo-loader (webpack)

javascript

svg

webpack

webpack-2

svgo