Unable to configure svgo-loader (webpack)

Question

I'm using svgo-loader to optimize the svg images and its using the default configuration for this. I want to add some custom configuration like I dont want to remove the viewBox from svg as it makes defining the dimensions of svg really hard.

I found the following solutions from internet... but none of them are working, and I always get the viewBox removed from svg.

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

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

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

Content of config.yml file

plugins:
  - removeTitle: false
  - remoViewBox: false

Content of svgo.config.js

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

For the configFile solution, I feel like it's just not picking the given file, because if I will provide the wrong file location (or some file location that doesnt exists) it works exactly same as the default case (my expectation was to have an error smething like ...wrong file supplied).

Answer 1

There is no need to pass any options for the svgo-loader in the webpack config. Just passing the default config under the root directory with the required options for fine-tuning the loader worked for me. Make sure its named svgo.config.js as this is this file that will be picked by the svgo for loading in options...much like how we pass config files for other things like prettier, ts, and so on.

webpack.config.js

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

And this is my svgo.config.js, since I just need to preserve the viewBox attribute on my SVG I have added that...you can use this complete list for your reference.

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

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

Thanks for the help @trySound!

Answer 2

Using svgo-loader v3.0.0 (with svgo v2.4.0 or newer):

create svgo.config.js in root project folder with following content:

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

in webpack.config.js

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