Why Pasting SVG Into React Breaks Your Build (And How to Fix It)

The "Namespace tags are not supported" Error

You copy an SVG from Illustrator, Figma, or Inkscape, paste it into your React component, save, and your dev server dies:

SyntaxError: Namespace tags are not supported by default

SVGs are XML. JSX is not. JSX transpiles into JavaScript function calls (React.createElement or the _jsx runtime), and XML namespace attributes with colons (xmlns:xlink, xlink:href) are not valid JavaScript identifiers. The parser hits a colon where it expects a prop name and bails.

What Exactly Crashes the Compiler?

Five categories of XML syntax break JSX parsing:

Namespace Colons: Attributes like xmlns:xlink, xlink:href, and proprietary tags like sketch:type are invalid in JSX. They must be converted to their camelCase equivalents (xmlnsXlink, xlinkHref, sketchType) or stripped entirely.
Kebab-Case Attributes: Standard XML attributes like stroke-width or stroke-linecap conflict with JavaScript's strict camelCase property mapping. React expects strokeWidth and strokeLinecap.
Reserved Keywords: The standard XML class attribute conflicts with the JavaScript reserved keyword class. It must be mapped to the className property.
Inline Style Strings: Writing style="fill: blue; stroke-width: 2px" is standard in HTML and XML, but JSX strictly requires style declarations to be passed as structured JavaScript objects (e.g., style={{ fill: 'blue', strokeWidth: '2px' }}).
XML Comments: Standard HTML/XML comments  will break JSX rendering. They must be translated to JavaScript evaluation comments {/* Comment */}.

React 19 Note

React 19 doesn't change any of these rules. The one relevant improvement: forwardRef is deprecated in favor of ref as a regular prop, so converted SVG components end up slightly cleaner.

Attribute Translation Table

Try the tool →

If you want to fix an SVG by hand, here is the mapping:

Raw XML Attribute	JSX Property Equivalent	Transpilation Mechanics
`class="icon"`	`className="icon"`	Maps to standard DOM `Element.className`.
`stroke-width="2"`	`strokeWidth="2"`	Transformed from kebab-case to camelCase.
`style="fill:#fff"`	`style={{ fill: '#fff' }}`	Converted from string to object literal.
`xmlns:xlink`	`xmlnsXlink`	Colon stripped and camelCased.
`xlink:href`	`xlinkHref`	Converted to support backward-compatible linking.
`<!-- path -->`	`{/* path */}`	Converted to a JS block comment.

Automating the Conversion

Doing this by hand across a multi-path SVG is slow and error-prone. CLI tools like SVGR work but require project setup and dependency management.

For a quick fix, paste your raw SVG into a browser-based SVG to JSX Converter. It maps every attribute, strips design-tool metadata (like sketch:type), and outputs a clean React component. The conversion runs client-side, so your source files never leave your machine.