image-minimizer-webpack-plugin: Error in Plugin name should be specified

Sorry, I didn’t find the time yet to create a reproducible repo, but I’m pretty sure the issue is not on svgo side. And I actually found out more on the svgo documentation. Instead of

[
  'svgo',
  {
    plugins: [
      {
        removeViewBox: false,
      },
    ],
  },
],

we need

[
  'svgo',
  {
    plugins: [
      {
        name: 'removeViewBox',
        active: false
      },
    ],
  },
],

Then it works fine and as expected.

But there is another thing I want to point out. On the svgo docs it says: “The default list is fully overridden if the plugins field is specified.”. So with the example in the readme of this project people risk completely losing svgo’s default settings when, like me, just copy&pasting the example. A better approach would be to use:

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

This way it works fine for me. If you still want I’ll try to find some time to create a repo, but after studying the docs of svgo things should be clear, what do you think? Should I create a PR to suggest changes to the readme?

extendDefaultPlugins is now deprecated. One needs to do this instead:

// ...

plugins: [
  {
    name: 'preset-default',
    params: {
      overrides: { removeViewBox: false },
    },
  },
],

// ...

To anyone struggling with this (and if you’d kindly like to add this example to the README or any other useful place), here’s what actually worked for me. It’s a bit long, but hopefully it will help.

• svgo.config.js

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupAttrs: true,
          removeDoctype: true,
          removeXMLProcInst: true,
          removeComments: true,
          removeMetadata: true,
          removeTitle: true,
          removeDesc: true,
          removeUselessDefs: true,
          removeEditorsNSData: true,
          removeEmptyAttrs: true,
          removeHiddenElems: true,
          removeEmptyText: true,
          removeEmptyContainers: true,
          removeViewBox: false,
          cleanupEnableBackground: true,
          convertStyleToAttrs: true,
          convertColors: true,
          convertPathData: true,
          convertTransform: true,
          removeUnknownsAndDefaults: true,
          removeNonInheritableGroupAttrs: true,
          removeUselessStrokeAndFill: true,
          removeUnusedNS: true,
          cleanupIDs: true,
          cleanupNumericValues: {
            floatPrecision: 1,
          },
          moveElemsAttrsToGroup: true,
          moveGroupAttrsToElems: true,
          collapseGroups: true,
          removeRasterImages: false,
          mergePaths: true,
          convertShapeToPath: {
            convertArcs: true,
          },
          sortAttrs: true,
          removeDimensions: true,
        },
      },
    },
    {
      name: 'removeAttrs',
      params: {
        attrs: '(width|height|style|color)',
      },
    },
  ],
}

index.js

const path = require('path')
const { optimize, loadConfig } = require('svgo')
const svgoConfigFile = path.resolve(__dirname, '../svgo.config.js')

;(async () => {
  const svgoConfig = await loadConfig(svgoConfigFile)
  const { data } = optimize(
    `<svg 
        xmlns="http://www.w3.org/2000/svg" 
        width="24" 
        height="24" 
        fill="none" 
        stroke="currentColor" 
        stroke-width="2" 
        stroke-linecap="round" 
        stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <path d="M12 8v4M12 16h.01"/>
     </svg>`,
     svgoConfig
  )
  console.log(data)
})()

Prints out:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  fill="none" 
  stroke="currentColor" 
  stroke-width="2" 
  stroke-linecap="round" 
  stroke-linejoin="round">
  <path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20zM12 8v4m0 4h.01"/>
</svg>