I am using styled components to create my react website. I tried to import my SVG logo but I get an error. Here is the code in my App page.
import myLogo from "../../images/logo-light.svg";
<NavLogoImg img={myLogo} />
And this the styled-component.
export const NavLogoImg = styled.div`
display: block;
background-size: contain;
width: 100%;
height: 97%;
`;
This is the error:
Compiled with problems:X
ERROR in ./src/images/logo-light.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
6 | ...props
7 | }, svgRef) {
> 8 | return <svg width={322.74658} height={60} viewBox="0 0 85.393365 15.875" id="svg2955" sodipodi:docname="MY_LOGO_WHITE_LARGE.svg" inkscape:version="1.1.1 (1:1.1+202109281949+c3084ef5ed)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" ref={svgRef} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<sodipodi:namedview id="namedview416" pagecolor="#505050" bordercolor="#eeeeee" borderopacity={1} inkscape:pageshadow={0} inkscape:pageopacity={0} inkscape:pagecheckerboard={0} showgrid="false" inkscape:zoom={5.528} inkscape:cx={162.44573} inkscape:cy={23.064399} inkscape:window-width={2530} inkscape:window-height={1016} inkscape:window-x={50} inkscape:window-y={27} inkscape:window-maximized={1} inkscape:current-layer="g1914" /><defs id="defs2952"><linearGradient x1={0} y1={0} x2={1} y2={0} gradientUnits="userSpaceOnUse" gradientTransform="matrix(66.439468,62.691547,62.691547,-66.439468,116.89632,170.20328)" spreadMethod="pad" id="linearGradient1006"><stop style={{
| ^^^^^^^^^^^^^^^^
9 | stopOpacity: 1,
10 | stopColor: "#ea2728"
11 | }} offset={0} id="stop1000" /><stop style={{
at File.buildCodeFrameError (/Users/intelligentica/Documents/intelligentica/website/node_modules/@babel/core/lib/transformation/file/file.js:249:12)
at NodePath.buildCodeFrameError (/Users/intelligentica/Documents/intelligentica/website/node_modules/@babel/traverse/lib/path/index.js:145:21)
at PluginPass.JSXNamespacedName (/Users/intelligentica/Documents/intelligentica/website/node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js:97:24)
at newFn (/Users/intelligentica/Documents/intelligentica/website/node_modules/@babel/traverse/lib/visitors.js:181:21)
at NodePath._call (/Users/intelligentica/Documents/intelligentica/websi
