In Playground svgo option "removeXMLNS" not working

[krutoo]

🐛 Bug Report

Hi, looks like in SVGR Playground svgo option "removeXMLNS" not working

To Reproduce

1. Open SVGR playground
2. set svgo config to textarea:

{ 
  "plugins": [
    { "removeXMLNS": false }, 
    { "removeViewBox": false }, 
    { "cleanupIDs": false }
  ] 
}

3. xmlns attribute still removes

Expected behavior

"xmlns" attribute must be in svg element

Maybe i doing something wrong, but it is not worked for me

[open-collective-bot]

Hey @krutoo 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[gregberge]

I think XMLNS is removed by SVGR, in React inline SVG you should not need it. I am curious, why do you need it?

[krutoo]

in React inline SVG you should not need it

Where can I find information on this?

I think XMLNS is removed by SVGR

Even if this attribute is not needed, it is rather unclear that the svgo option associated with it will not work.

[gregberge]

When you inline you are in a HTML page so no need to specify a namespace.

Yes you are right, we should mention it in documentation. Do you want to contribute?

[krutoo]

so far I am inclined to believe that the library user should be able to control options of svgo if there is such a plugin

but i don't mind to contribute

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MichaelGruben]

I can confirm that svgr itself does remove the namespaces. We have the issue with our own built component library. Our SVG-library is built as components by svgr. Other components can include them. Now we want to import them into css-code as pseudo element. There we have the need for namespaces. Otherwise the icon isn't rendered. See this codepen https://codepen.io/MichaGru/pen/KKzLMwm

[krutoo]

@MichaelGruben That is interest usage case, i think you can use some config:

module.exports = {
  plugins: [
    '@svgr/plugin-svgo',
    '@svgr/plugin-jsx',
  ],
  svgProps: {
    // it is works
    xmlns: 'http://www.w3.org/2000/svg',
  },
  svgoConfig: {
    plugins: [
      { removeXMLNS: false }, // it is not working
    ],
  },
};

But i also believe this "feature" should be explicit or optional.

[MichaelGruben]

@krutoo in fact we use the svgProps property and this just works -> but we got icons with differing namespaces. All naturally have the basic xmlns but others have xmlns:xlink also. So currently we setup both namespaces (xmlns and xmlnsXlink) for all while running svgr on a folder.

I would prefer and expect from svgr that it takes the svgo-optimized svg (where its my turn to remove the NS) and removes nothing more -> the only task should be the transformation to a component. Especially if svgr will follow a valid standard (the NS is the only required attribute for the svg-tag - see https://www.w3.org/TR/SVG2/struct.html#Namespace if the svg is parsed as XML)

[gregberge]

Fixed in #498