使用@svgr/webpack加载SVG时如何保留ID？

Question

我正在使用 @svgr/webpack 将 SVG 文件加载到 React 中，我工作正常，但它去除了元素的 ID。
为了保留 ID，我在 SVGO 配置文件中看到选项 cleanIDs，我将其设置为 false，但无济于事。
我怎样才能保留我的身份证件？

以下是我在 webpacks 中配置加载器的方式：

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

我也试过：

完全禁用 SVGO，但随后无法加载 SVG 文件
使用选项 cleanupIDs，但 ID 仍被删除

Answer 1

这个配置对我有用 @svgr/webpack@5.5.0:

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

一些帮助我解决这个问题的链接：

使用@svgr/webpack加载SVG时如何保留ID？

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

svg

reactjs

webpack

svgo