reactjs - How to keep ids when loading SVG with @svgr/webpack?

Question

I am loading SVG files with @svgr/webpack into React, I works fine but it strips the ids of the elements.
In order to keep the ids, I saw the option cleanIDs in SVGO config file, which I set to false, but to no avail.
How can I keep my ids?

Here is how I configure the loader in webpacks:

{
  test: /\.svg$/,
  use: [
    {
      loader: "@svgr/webpack",
      options: {
        cleanIDs: false,
      },
    },
  ],
},

I also tried:

• to disable SVGO altogether, but then it fails to load the SVG files
• with option cleanupIDs, but the ids are still removed

Answer 1

This config worked for me on @svgr/webpack@5.5.0:

use: [
  {
    loader: "@svgr/webpack",
    options: {
      svgoConfig: {
        plugins: [
          {
            cleanupIDs: false
          }
        ]
      }
    }
  }
]

Some links that helped me figure this out:

• svgo webpack example
• svgo config options