reactjssvgwebpacksvgo

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


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:


Solution

  • 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: