'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 ?

reactjssvg


Solution 1:[1]

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

Solution 2:[2]

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/

Solution 3:[3]

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

Solution 4:[4]

I recommend using svgo to compress your SVG files. Simple CLI tool that runs with NodeJS and doesn't require you to upload your copyrighted SVGs anywhere.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Bozena Z.
Solution 4 devgioele

Related Questions