Search code examples
reactjssvg

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 ?

Solution

  • In the SVG file, try changing:

    sketch:type TO sketchType
xmlns:xlink TO xmlnsXlink
xlink:href  TO xlinkHref
xmlns:bx    TO xmlnsBx
bx:origin   TO bxOrigin
etc...

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