Back to Design Tools

SVG to JSX Converter

Convert SVG markup to JSX-compatible React components

SVG Input
JSX Output
Paste SVG on the left...

SVG to JSX Converter

Convert standard SVG markup into JSX-compatible React components. This tool automatically handles the differences between HTML/SVG and JSX: converting class to className, kebab-case attributes to camelCase, inline style strings to JavaScript objects, and HTML comments to JSX comments.

What Gets Converted?

Attributes

class→className, for→htmlFor, tabindex→tabIndex, and all kebab-case to camelCase.

Styles

Inline style strings converted to JavaScript objects with camelCase properties.

Self-closing

Non-self-closed void elements like <br> become <br />.

Comments

HTML comments <!-- --> become JSX comments {/* */}.