CODEWITHSUNDEEP
reactjssvg
Edgar
Edgar

Reputation: 6856

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 ?

Upvotes: 135

Views: 137483

Answers (9)

Dave Cole
Dave Cole

Reputation: 2765

I recommend checking out SVGO - it's a command-line tool that automatically strips out the offending tags.

npm install -g svgo

svgo *.svg

Upvotes: 3

Frawel
Frawel

Reputation: 3994

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.

Upvotes: 343

Anshuman Bisoyi
Anshuman Bisoyi

Reputation: 236

You first have to convert the SVG file to JSX then use it. Use https://svg2jsx.com/

Upvotes: 0

Sooth
Sooth

Reputation: 3104

In mine I had to change:

   xmlns:svg="http://www.w3.org/2000/svg"

to

   xmlnsSvg="http://www.w3.org/2000/svg"

Upvotes: 6

ctown4life
ctown4life

Reputation: 965

This is a nice tool that converts an SVG into a react friendly component and includes support for typescript

https://react-svgr.com/playground/

Upvotes: 5

Tharusha Jayasooriya
Tharusha Jayasooriya

Reputation: 177

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/

Upvotes: 15

Bozena Z.
Bozena Z.

Reputation: 11

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

Upvotes: 1

devgioele
devgioele

Reputation: 159

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.

Upvotes: 2

Ahmad Salih
Ahmad Salih

Reputation: 658

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

Upvotes: 49

Related Questions