Free Developer Tool

JSX to SVG

Transform React JSX SVG markup into standard SVG syntax.

JSX Input

SVG Output

What is JSX to SVG?

Convert SVG markup written in React JSX back into standard SVG syntax. The tool converts JSX-specific attribute names such as className and strokeWidth into their standard SVG equivalents.

How to use

Paste JSX SVG markup.
Convert the JSX to SVG.
Review the standard SVG output.
Copy the generated SVG.

Features

JSX to SVG conversion
React attribute conversion
className conversion
SVG attribute normalization
Browser processing

Common Use Cases

Exporting React icons
Working with static SVG files
Frontend development
SVG asset preparation
Migrating React components

Example

Input

<svg className="icon" strokeWidth="2" viewBox="0 0 24 24">
  <path strokeLinecap="round" d="M5 12h14" />
</svg>

Output

<svg class="icon" stroke-width="2" viewBox="0 0 24 24">
  <path stroke-linecap="round" d="M5 12h14"/>
</svg>

FAQ

Can JSX SVG attributes be converted?

Yes. JSX-specific attribute names are converted to their standard SVG equivalents.

Does it convert className to class?

Yes.

Can the output be saved as an SVG file?

Yes. The generated markup can be copied or saved as a standard SVG document.

Missing a feature?

If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.

New improvements and features are added based on user feedback.

Related Tools

SVG Formatter

Format and beautify SVG code.

SVG Minifier

Minify SVG code and remove whitespace.

SVG Viewer

Preview SVG graphics instantly.

SVG Cleaner

Clean unnecessary SVG markup.

SVG to JSX

Convert SVG markup to JSX.