3

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
Louis Coulet
  • 3,663
  • 1
  • 21
  • 39

1 Answers1

5

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:

heidi
  • 188
  • 1
  • 6
  • 2
    Thank you @heidi, it works. However it has two new issues: it prevents collapsing groups, and the id is prefixed with the file name: from "path1" to "hexa_svg__path1". Do you notice the same? – Louis Coulet Jan 20 '21 at 20:50
  • I have the same issue with prefixed ID, which makes svg not work properly – Hovhannes Babayan Feb 26 '21 at 12:52
  • 3
    @LouisCoulet Add `{prefixIds: false}` to `plugins` and you will be good to go. The doc says already disabled by default but you still need to disable it in this case https://github.com/svg/svgo#built-in-plugins – spondbob Apr 10 '21 at 01:07