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.
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.