I have an SVG in my react component, it is used like this:
import logo from './logo.svg';
// and then in JSX
<img src={logo} alt="logo"/>
It worked well until I updated react to 18.
I am getting this error now:
Compiled with problems:X
ERROR in ./src/logo.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
5 | ...props
6 | }, svgRef) {
> 7 | return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="131.16136mm" height="95.620743mm" viewBox="0 0 464.74498 338.81365" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="surfing-js.svg" inkscape:export-filename="F:\\\\dev\\\\graphics\\\\gophers\\\\svg-rasterized\\\\surfing-js.png" inkscape:export-xdpi={134.17} inkscape:export-ydpi={134.17} ref={svgRef} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs id="defs4"><linearGradient inkscape:collect="always" id="linearGradient4289"><stop style={{
| ^^^^^^^^
8 | stopColor: "#00dce2",
9 | stopOpacity: 1
10 | }} offset={0} id="stop4291" /><stop style={{
at File.buildCodeFrameError (/Users/myusr/projects/testpj/node_modules/@babel/core/lib/transformation/file/file.js:209:12)
I found this SO question and tried converting tags to camel case. But after I have done that my CSV is not rendered correctly. Besides I would prefer not to edit it (not to say I don't understand a single line of code in it).
The other solutions suggested was to adjust babel config, at the same time I found this GithHub issue where it is recommended not to do that either.
Question: How to overcome this SVG rendering issue without having to significantly adjust project configuration and having to change the SVG code?
I would appreciate any suggestions.
Here is my CSV if you need it.
