SyntaxError: unknown: Namespace tags are not supported by default

I get the following error when trying to download svg as a React Component.

SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.

import React from "react";
import { ReactComponent as LO } from "../a/Logo.svg"
import { NavLink } from "react-router-dom";

const Logo = () => (
  <>
    <NavLink to={"/"}>
     <LO width={"40px"} height={"40px"} />
    </NavLink>
  </>
);

export default Logo;

What is the reason ?

In the SVG file, try changing:

    sketch:type TO sketchType
    xmlns:xlink TO xmlnsXlink
    xlink:href  TO xlinkHref

etc...

The idea is to create camelCase property, remember that you are working with JSX, you are not creating a string as XML does.

Since we are in the JSX playground your SVG tags should be written as camelCase

So you can easily optimize your SVG using the link below to avoid this error :)

svgminify

The most simple solution is to just convert the SVG file to JSX.Then create a separate component or just copy paste the tag. This website does the job perfectly.

https://svg2jsx.com/

I had the same issue with all my svg files. Opening them in Adobe Illustrator and saving them again solved the issue.