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.
CodePudding user response：
As suggested in other SO posts linked in question, we need to convert all attribute names to camelcase for them to work in react.js. There are certain attributes that are not recognised by react like "xmlns:dc" and if you try to convert them into camel case, you might get error like below
React does not recognize the `xmlnsDc` prop on a DOM element
But such attributes can be safely removed from SVG files as they won't impact the image.
Sharing converted react component for SVG file you shared:
import React from "react";
const MySVG = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="495.728"
height="361.401"
version="1.1"
viewBox="0 0 464.745 338.814"
>
<defs>
<linearGradient id="linearGradient4289">
<stop offset="0" stopColor="#00dce2" stopOpacity="1"></stop>
<stop offset="1" stopColor="#97f0ff" stopOpacity="1"></stop>
</linearGradient>
<linearGradient
id="linearGradient4295"
x1="431.334"
x2="400.666"
y1="531.393"
y2="386.128"
gradientTransform="translate(129.453 193.74)"
gradientUnits="userSpaceOnUse"
xlinkHref="#linearGradient4289"
></linearGradient>
</defs>
<g display="inline" transform="translate(-111.737 -176.023)">
<path
fill="url(#linearGradient4295)"
fillOpacity="1"
fillRule="evenodd"
stroke="none"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeOpacity="1"
strokeWidth="1"
d="M132.042 433.463c23.84-32.316 103.542-15.624 130.056.606 89.595 44.02 169.113-19.05 186.402-33.707 42.52-37.92 60.763-37.33 75.655-30.124 4.45 2.154 10.795 11.465 14.408 12.5 98.104 111.17-186.007 131.629-317.798 102.342-60.452-13.433-102.376-33.11-88.723-51.617z"
></path>
</g>
<g display="none" transform="translate(-111.737 -176.023)">
<path
fill="#f3df49"
fillOpacity="1"
fillRule="evenodd"
stroke="none"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeOpacity="1"
strokeWidth="1"
d="M132.042 433.463c23.84-32.316 103.542-15.624 130.056.606 89.595 44.02 169.113-19.05 186.402-33.707 42.52-37.92 60.763-37.33 75.655-30.124 4.45 2.154 10.795 11.465 14.408 12.5 98.104 111.17-186.007 131.629-317.798 102.342-60.452-13.433-102.376-33.11-88.723-51.617z"
></path>
</g>
<g transform="translate(17.717 17.717)">
<path
fill="#2e2e2c"
fillOpacity="1"
d="M397.824 203.03c-2.159.004-4.045.321-5.6.972-1.554.651-2.778 1.63-3.645 2.857-.866 1.227-1.375 2.699-1.529 4.306-.153 1.607.049 3.349.582 5.126.579 1.93 1.307 3.55 2.192 4.91a13.088 13.088 0 003.107 3.348c1.182.895 2.503 1.59 3.932 2.165 1.428.575 2.962 1.03 4.566 1.444l.553.146.548.15.544.152.54.155c.982.297 1.843.588 2.584.913.74.325 1.364.677 1.87 1.086.506.41.895.875 1.153 1.453.258.577.386 1.265.358 2.152a5.951 5.951 0 01-.47 2.131 6.491 6.491 0 01-1.208 1.864 7.522 7.522 0 01-1.858 1.459 8.952 8.952 0 01-2.42.918c-1.06.24-2.007.293-2.854.183a5.78 5.78 0 01-2.27-.79c-.672-.405-1.267-.943-1.811-1.577-.545-.634-1.037-1.364-1.507-2.154l-1.985 1.807-2.038 1.863-2.09 1.915-2.142 1.96c.653 1.394 1.473 2.66 2.469 3.74a11.564 11.564 0 003.52 2.618c1.353.647 2.886 1.049 4.598 1.16 1.712.11 3.601-.072 5.668-.572 2.113-.512 4.089-1.296 5.865-2.332 1.777-1.035 3.355-2.321 4.663-3.833a16.57 16.57 0 003.055-5.187 17.519 17.519 0 001.046-6.319c-.046-2.03-.392-3.575-.957-4.93-.565-1.354-1.35-2.504-2.325-3.564-.976-1.06-2.123-1.878-3.477-2.66a23.428 23.428 0 00-4.756-2.066l-.546-.168-.554-.16-.56-.157-.57-.14a34.934 34.934 0 01-2.614-.735c-.76-.255-1.408-.529-1.952-.849-.544-.32-.983-.686-1.331-1.128-.348-.441-.605-.957-.792-1.578a3.249 3.249 0 01-.124-1.428c.067-.442.244-.843.525-1.183.281-.34.667-.617 1.15-.817.484-.2 1.065-.32 1.733-.354a8.835 8.835 0 011.843.09 7.096 7.096 0 011.677.485 7.75 7.75 0 011.552.897c.503.37 1 .815 1.513 1.346l1.164-1.306 1.08-1.395 1.126-1.449 1.302-1.465c-.991-1.037-1.863-1.841-2.77-2.497-.906-.656-1.868-1.17-3.04-1.614a20.581 20.581 0 00-3.912-1.033c-1.382-.225-2.43-.278-4.371-.33 0 0 1.894-.003 0 0zm-35.9 4.18l2.956 8.923 2.485 8.916 1.614 9.051.648 9.272a9.355 9.355 0 01-.439 3.521c-.309.977-.768 1.768-1.352 2.408-.584.64-1.294 1.13-2.115 1.507-.82.376-1.752.64-2.78.827-1.073.196-1.992.196-2.801.044a5.873 5.873 0 01-2.145-.869c-.636-.412-1.207-.934-1.756-1.523-.549-.59-1.077-1.246-1.625-1.93l-2.483 1.763-2.427 1.737-2.357 1.71-2.276 1.68c-1.22.901 1.792 2.467 2.93 3.515a15.408 15.408 0 003.934 2.65c1.492.697 3.171 1.185 5.068 1.395 1.897.21 4.013.141 6.381-.281 2.622-.468 5.04-1.253 7.208-2.352 2.168-1.098 4.086-2.511 5.705-4.232a19.5 19.5 0 003.883-6.069c.94-2.32 1.683-4.968 1.511-7.8l-.473-9.292-1.59-8.98-2.622-8.769-3.26-8.728-2.891.48-2.94.48-2.98.476z"
display="inline"
></path>
</g>
<g
strokeDasharray="none"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeOpacity="1"
strokeWidth="2"
transform="translate(-111.737 -176.023)"
>
<path
fill="#388e3c"
fillOpacity="1"
fillRule="evenodd"
stroke="#000"
strokeLinecap="butt"
d="M198.79 380.429c.258-2.631 4.098-13.37 31.374-.952 87.587 39.873 172.374 28.761 238.086 1.513-35.446 31.74-105.09 70.96-151.5 82.622-33.173-.25-69.22-8.332-91.922-33.79-10.377-11.637-27.083-38.739-26.038-49.393z"
display="inline"
></path>
<ellipse
cx="280.876"
cy="474.384"
fill="#1b5e2f"
fillOpacity="0.941"
stroke="none"
strokeDashoffset="0"
strokeLinecap="round"
opacity="1"
rx="83.288"
ry="22.62"
transform="matrix(.9852 -.1714 .13103 .99138 0 0)"
></ellipse>
</g>
<g
stroke="#000"
strokeOpacity="1"
transform="translate(-111.737 -176.023)"
>
<path
fill="#8ed4fe"
fillOpacity="1"
fillRule="evenodd"
strokeDasharray="none"
strokeLinecap="round"
strokeLinejoin="miter"
strokeMiterlimit="4"
strokeWidth="2.367"
d="M369.51 223.971c8.7-7.655 16.286-10.658 23.079-7.257 4.975 2.49 3.88 9.206.186 14.35-4.404 6.131-8.49 9.32-8.744 9.31"
display="inline"
opacity="1"
></path>
<path
fill="#000"
fillOpacity="1"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="0.395"
d="M377.176 235.834c.04.824 4.25 3.422 5.457 3.096 1.767-.477 8.642-9.057 8.6-10.83-.114-4.972-14.082 7.2-14.057 7.734z"
display="inline"
opacity="1"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeMiterlimit="4"
strokeWidth="2"
d="M388.092 315.25c1.496-1.405 4.867-1.942 7.212-3.04 4.645-2.175 7.611-5.532 6.625-7.496-.985-1.965-5.55-1.794-10.195.382-2.244 1.052-4.386 1.93-6.409 2.138"
display="inline"
opacity="1"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
fillRule="evenodd"
strokeDasharray="none"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeMiterlimit="4"
strokeWidth="4"
d="M298.548 433.973c-13.22-2.143-19.679-12.58-26.607-23.445-39.8-62.416-31.281-150.252-11.383-173.744 28.95-34.182 95.759-33.51 125.692 5.328 23.506 26.833-1.187 59.973-.604 88.64 42.218 17.603 36.354 74.36 36.354 74.36s-29.164-3.515-46.414.485c-13.469 3.124-29.732 10.114-48.81 19.564-9.17 4.542-16.54 10.707-28.228 8.812z"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeMiterlimit="4"
strokeWidth="4"
d="M250.55 329.788c-2.015 1.902-6.565 2.64-9.73 4.129-6.264 2.955-10.258 7.499-8.92 10.148 1.339 2.65 7.503 2.403 13.769-.553 3.025-1.428 5.915-2.621 8.646-2.91"
display="inline"
opacity="1"
></path>
<path
fill="none"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="1"
d="M391.384 334.295c-9.823-5.145-22.274-2.475-22.274-2.475"
></path>
<path
fill="#8ed4fd"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeMiterlimit="4"
strokeWidth="4"
d="M286.83 422.587c6.996 10.92 1.841 23.67 8.24 25.193 5.237 1.246 10.83-11.015 16.597-20.235"
display="inline"
opacity="1"
></path>
<circle
cx="312.057"
cy="259.305"
r="33.415"
fill="#fff"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="3"
opacity="1"
></circle>
<ellipse
cx="383.257"
cy="275.775"
fill="#fff"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="2.806"
opacity="1"
rx="23.077"
ry="24.17"
></ellipse>
<g
fillOpacity="1"
strokeDasharray="none"
strokeMiterlimit="4"
transform="translate(4.328 .457)"
>
<path
fill="#fff"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="2.564"
d="M335.728 298.82c-1.108 3.632-.698 12.213-.698 12.213l10.475 3.152s4.853-5.714 5.444-7.781c.592-2.068.338-3.207.338-3.207z"
display="inline"
opacity="1"
></path>
<path
fill="#d3b78d"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="2.564"
d="M327.716 292.849c-7.616 7.896 4.591 8.084 14.163 10.196 7.577 1.67 16.83 10.159 19.098 2.508 3.92-13.223-23.494-22.831-33.261-12.704z"
display="inline"
opacity="1"
></path>
<ellipse
cx="420.17"
cy="-167.764"
fill="#000"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="bevel"
strokeWidth="1.923"
display="inline"
opacity="1"
rx="11.351"
ry="6.498"
transform="scale(1 -1) rotate(-18.249)"
></ellipse>
</g>
<circle
cx="324.338"
cy="267.016"
r="8.853"
fill="#000"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="2.285"
opacity="1"
></circle>
<circle
cx="392.334"
cy="283.759"
r="6.781"
fill="#000"
fillOpacity="1"
strokeDasharray="none"
strokeDashoffset="0"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeWidth="1.75"
opacity="1"
></circle>
<path
fill="#8ed4fe"
fillOpacity="1"
fillRule="evenodd"
strokeDasharray="none"
strokeLinecap="round"
strokeLinejoin="miter"
strokeMiterlimit="4"
strokeWidth="2.913"
d="M278.198 228.795c-3.902-10.61-2.26-20.229 2.508-28.163 3.346-5.568 7.803-6.188 11.596-4.822 6.332 2.281 9.116 9.465 12.68 20.664"
display="inline"
opacity="1"
></path>
<path
fill="#000"
fillOpacity="1"
fillRule="evenodd"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeWidth="0.486"
d="M288.665 223.718c.788.64 5.95-1.759 7.315-2.47 2.72-1.417.131-13.619-2.11-15.238-4.96-3.583-5.716 17.294-5.205 17.708z"
display="inline"
opacity="1"
></path>
</g>
<g display="inline" transform="translate(-111.737 -176.023)">
<path
fill="#4caf50"
fillOpacity="1"
fillRule="evenodd"
stroke="#000"
strokeDasharray="none"
strokeLinecap="butt"
strokeLinejoin="round"
strokeMiterlimit="4"
strokeOpacity="1"
strokeWidth="2"
d="M199.505 378.716c-3.003 5.856-4.34 9.43-3.462 28.282 21.667 47.77 122.45 97.485 235.386 8.578 16.785-13.214 43.013-41.156 70.714-46.428 20.44-3.89 35.552 12.637 35.552 12.637l-9.17-19.116c-10.613-21.217-55.799-16.392-82.11 2.943-35.088 25.784-70.3 86.105-142.844 83.536-79.713-2.823-108.82-63.392-104.066-70.432z"
></path>
</g>
</svg>
);
};
export default MySVG;Also, sharing codesandbox with running code for reference - https://codesandbox.io/s/gallant-bush-spg49f.
CodePudding user response：
As stated by Raeesaa, it seems like a camelCase problem. There are online tools for adjusting the SVGs with one click, like svg2jsx.
Yet... I've done some research on the error. Something is wrong on the bundling of @svgr/webpack.
On the first example, you used it as a relative url to 'img' tag 'src' attribute.
If you are not using it as <Logo /> somewhere, then it might be something related to how webpack is configured to handle SVGs on create-react-app (have you heard of vite?).
If your project was bootstrapped with CRA, try the first solution from this issue reply:
"1. put @svgr/webpack to your package.json of your project."
npm i @svgr/webpack