Why does stroke-width have to become strokeWidth in JSX?

JSX compiles to `React.createElement` calls, and React applies SVG attributes through the DOM SVG-element properties, which are keyed by camelCased names — `element.strokeWidth`, not `stroke-width`. A literal `stroke-width` prop in JSX is invalid syntax (the hyphen reads as minus), and even a quoted one would be ignored by React's prop handling. So we camelCase the entire SVG presentation set: `stroke-width` → `strokeWidth`, `fill-rule` → `fillRule`, `stroke-linecap` → `strokeLinecap`, `clip-path` → `clipPath`, and so on. `viewBox`, `preserveAspectRatio`, and other already-mixed-case attributes are passed through untouched, because React wants those in exactly that casing.

How do I pass props through to change the color or size?

Tick "wrap as component". The output becomes `export default function Icon(props) { return ( …) }`, with `{...props}` spread onto the root ` ` after the built-in attributes, so anything you pass overrides the defaults. Render ` ` and the class, size, and handler all land on the SVG. Pair it with `stroke="currentColor"` (most icon sets ship that) and the icon inherits the surrounding text color for free — no per-color component needed.

What happens to xlink:href, it has a colon — is that valid?

A colon isn't valid in a JSX attribute name, so we rewrite the XML-namespaced attributes to React's camelCase equivalents: `xlink:href` → `xlinkHref`, `xmlns:xlink` → `xmlnsXlink`, `xml:space` → `xmlSpace`. `xlinkHref` is deprecated in newer React (it prefers plain `href` on ` `), but it still works and matches what most existing codebases use; if your React is recent you can rename `xlinkHref` to `href` after pasting. Either way the output compiles, which the raw `xlink:href` would not.

Does it run or sanitize the SVG I paste?

It parses, it does not execute. We use `DOMParser.parseFromString(..., 'image/svg+xml')`, which builds an inert document — scripts don't run, external references don't fetch, event handlers never fire. We then walk that tree as data and rebuild a string. We do not strip ` ` elements or `on*` handlers for you: if your source SVG carries them, they appear in the JSX (camelCased) so you can decide what to keep. Treat the output as code to review, especially for SVGs from an untrusted source.

Turn a Figma icon export into a reusable component

You exported an icon as SVG from Figma. Pasting it straight into a `.tsx` file fails on the first `stroke-width=` and the inline `style="..."`, and even after fixing those it renders blank because the `viewBox` got lowercased somewhere. Workflow: paste it here, leave "wrap as component" on, set the name to `MenuIcon`, copy the output. You get `export default function MenuIcon(props) { return ( …) }` with every attribute camelCased and `viewBox` casing intact. Drop it in, render ` `, done.

Convert a lucide / Heroicons path into your own icon set

You found the exact icon you need in an open-source set but don't want the whole dependency for one glyph. Copy the inline ` ` from the icon's page, paste here, tick "remove width/height" so your CSS sizes it, and copy. Because the source uses `stroke="currentColor"`, the generated component inherits text color automatically — one component, every color, no props needed for the common case.

Migrate class-component SVGs across a codebase

An old project has dozens of inline SVGs written as raw HTML-ish markup with `class`, `stroke-width`, and `xlink:href`. Run each through the converter to get JSX-valid output: `class` → `className`, `stroke-width` → `strokeWidth`, `xlink:href` → `xlinkHref`. It's the fastest path from "this SVG works in a static page" to "this SVG compiles inside a React component" without a build-time SVGR setup.

Inline a logo with gradients and clip paths

A brand logo SVG uses ` `, ` `, and ` ` — all case-sensitive element names that a naive find-and-replace would mangle. Paste the whole thing; the converter preserves every element's casing, camelCases `stop-color` and `clip-path`, and turns inline styles into objects. You get a single self-contained component instead of an ` ` you can't recolor.

Teach the SVG-to-JSX gotchas to a teammate

Onboarding someone new to React who keeps asking why their pasted SVG renders nothing? Paste a small icon and show them the diff: `stroke-width` vs `strokeWidth`, why `viewBox` must keep its capital B, where `{...props}` goes. Share the URL (the input rides in the link) so they can replay it and try their own SVG without re-typing.

SVG to JSX — Paste SVG, Get a React Component

Paste SVG, get a React component — attributes camelCase, style becomes an object, wrap with {...props} passthrough. Browser-only.

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Wrap as componentRemove width/heightName:

Indent:

SVG

JSX

Runs entirely in your browser via DOMParser (read-only — nothing executes, nothing uploads). Your SVG is synced into the URL so a share link reproduces it; copy the output manually for private artwork.

What this tool does

Free online SVG to JSX / React component converter. Paste raw SVG — an icon exported from Figma, a `lucide` / Heroicons path, an inline `<svg>` copied off a designer's artboard, a full illustration with gradients and clip paths — and get back JSX you can drop straight into a `.jsx` / `.tsx` file without the compiler complaining. We camelCase every attribute React wants in that shape: `stroke-width` becomes `strokeWidth`, `fill-rule` becomes `fillRule`, `clip-path` becomes `clipPath`, `stop-color` becomes `stopColor`, and the whole presentation set. Namespaced attributes are handled too — `xlink:href` becomes `xlinkHref`, `xmlns:xlink` becomes `xmlnsXlink`, `xml:space` becomes `xmlSpace`. `class` becomes `className`, inline `style="fill:red;stroke-width:2"` becomes a real object `style={{ fill: 'red', strokeWidth: '2' }}`, empty elements self-close, and `` turn into `{/* JSX comments */}`. Case-sensitive SVG element names (`linearGradient`, `clipPath`, `feGaussianBlur`) and mixed-case attributes (`viewBox`, `preserveAspectRatio`, `gradientUnits`) keep their exact casing — getting that wrong is the single most common way a hand-converted SVG silently renders blank. Tick "wrap as component" and you get `export default function Icon(props) { return (<svg {...props}>…) }`, so callers control color, size, `className`, and click handlers through props. "Remove width/height" strips the hardcoded size so CSS or props drive it. Parsing runs through the browser's native DOMParser in read-only mode, so a stray inline script or `onload` can't execute. 100% client-side, nothing uploaded, nothing logged.

Tool details

Input: Files + Text; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 18 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How SVG to JSX fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Turn a Figma icon export into a reusable component
You exported an icon as SVG from Figma. Pasting it straight into a `.tsx` file fails on the first `stroke-width=` and the inline `style="..."`, and even after fixing those it renders blank because the `viewBox` got lowercased somewhere. Workflow: paste it here, leave "wrap as component" on, set the name to `MenuIcon`, copy the output. You get `export default function MenuIcon(props) { return (<svg {...props}>…) }` with every attribute camelCased and `viewBox` casing intact. Drop it in, render `<MenuIcon className="size-5" />`, done.
Convert a lucide / Heroicons path into your own icon set
You found the exact icon you need in an open-source set but don't want the whole dependency for one glyph. Copy the inline `<svg>` from the icon's page, paste here, tick "remove width/height" so your CSS sizes it, and copy. Because the source uses `stroke="currentColor"`, the generated component inherits text color automatically — one component, every color, no props needed for the common case.
Migrate class-component SVGs across a codebase
An old project has dozens of inline SVGs written as raw HTML-ish markup with `class`, `stroke-width`, and `xlink:href`. Run each through the converter to get JSX-valid output: `class` → `className`, `stroke-width` → `strokeWidth`, `xlink:href` → `xlinkHref`. It's the fastest path from "this SVG works in a static page" to "this SVG compiles inside a React component" without a build-time SVGR setup.
Inline a logo with gradients and clip paths
A brand logo SVG uses `<linearGradient>`, `<clipPath>`, and `<feGaussianBlur>` — all case-sensitive element names that a naive find-and-replace would mangle. Paste the whole thing; the converter preserves every element's casing, camelCases `stop-color` and `clip-path`, and turns inline styles into objects. You get a single self-contained component instead of an `<img>` you can't recolor.
Teach the SVG-to-JSX gotchas to a teammate
Onboarding someone new to React who keeps asking why their pasted SVG renders nothing? Paste a small icon and show them the diff: `stroke-width` vs `strokeWidth`, why `viewBox` must keep its capital B, where `{...props}` goes. Share the URL (the input rides in the link) so they can replay it and try their own SVG without re-typing.

Common pitfalls

Lowercasing case-sensitive names. `viewBox`, `preserveAspectRatio`, `gradientUnits`, and SVG element names like `linearGradient` / `clipPath` are case-sensitive — change the casing and the SVG renders blank with no error. We preserve them exactly; a hand-done find-and-replace usually doesn't.
Forgetting that the converter does not sanitize. It camelCases and rebuilds, it does not scrub. A `<script>` or `onload` in your source SVG survives into the JSX (the handler gets camelCased). Review the output before shipping an SVG from an untrusted source.
Expecting `xlinkHref` to be ideal on modern React. We emit `xlinkHref` because it matches existing codebases and always compiles, but recent React prefers a plain `href` on `<use>`. If you're on a new version and see a deprecation warning, rename `xlinkHref` to `href` after pasting.

Privacy

Conversion is plain JavaScript that runs entirely in your browser tab. Your SVG is parsed with the native DOMParser in an inert document — no network request, no upload, no analytics on what you pasted, scripts never execute. The one thing that does travel: your input is synced into the page URL's query string so a share link reproduces the same conversion. That's handy for collaboration but means anything in the input ends up in browser history and the recipient's server logs. For private artwork or SVGs that embed sensitive data, copy the output manually instead of sharing the URL. Your conversion options (wrap, remove size, indent, name) are remembered in this browser's localStorage and never leave the device.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Developer

Browse all tools for this role

SVG to JSX — Paste SVG, Get a React Component

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How SVG to JSX fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Turn a Figma icon export into a reusable component

Convert a lucide / Heroicons path into your own icon set

Migrate class-component SVGs across a codebase

Inline a logo with gradients and clip paths

Teach the SVG-to-JSX gotchas to a teammate

Common pitfalls

Privacy

FAQ

HTML to JSX

SVG Optimizer

SVG to PNG Converter

JSON to TypeScript Interface

CSS Formatter & Minifier

HTML to Markdown

AI Eval Planner

Apache Cheatsheet

API Key Generator

API Rate Limit Cheatsheet

ASCII Table Generator

ASCII Table Reference