⌘ K
svg → jsx · attribute rename · style object · component wrap · live

Convert SVG to JSX

Rename SVG attributes to their JSX-friendly camelCased forms, turn inline styles into JS style objects and optionally wrap the result as a React component.

SVG → JSX
Input
195 B
4 lines
Output
192 B
4 lines
Status
ready
live
Ratio
0.98×
out/in
input · svg markup
output · jsx
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
  <circle cx="12" cy="12" r="10" />
  <path d="M9 12l2 2 4-4" />
</svg>
Quick Start

How conversion works

SVG attributes like stroke-linecap and fill-rule are camelCased to the names JSX expects. Inline style strings become JS objects with camelCased keys. Optionally the whole tree wraps in an export default function so it can be imported as a React component.

  1. 01

    Paste SVG

    Anything from a designer's export to a Heroicons snippet.

    Parsing is strict-but-tolerant — comments and trailing commas are accepted on input where the source format historically permits them; output stays canonical.

    inputstricttolerantliveparse
    in · sourcesvg · live
    <svg viewBox="0 0 24 24">...</svg>
    loaded · parsedtarget · ready
  2. 02

    Rename attributes

    stroke-linecap → strokeLinecap, fill-rule → fillRule, etc. — covers the SVG attributes React requires camelCased.

    Conversion preserves type information where the target supports it (numbers stay numeric, booleans stay boolean) so the destination parser never has to re-coerce.

    attrstype-preservinglosslesslivememoised
    name · optionscamel · live
    strokeWidth="2"
    options applied · liveround-trip
  3. 03

    Inline styles

    style="opacity: 0.5" becomes style={{ opacity: "0.5" }} for JSX.

    Re-encoding is idempotent: running output back through the same converter produces the same bytes, which keeps round-trips git-friendly.

    styleidempotentround-tripdiff-cleandeterministic
    str · convertedobject · ready
    style={"opacity":"0.5"}
    converted · livediff-clean
  4. 04

    Optional wrap

    Toggle the Wrap as component checkbox to emit an importable React component.

    Copy writes via navigator.clipboard.writeText; downloads use the target’s native MIME so editors apply the right syntax highlighting on open.

    wrapclipboardtarget MIMEblobclient-side
    ✓ · copiedready · done
    export default function Icon(props) {...}
    shipped · ready to shipsuccess
Pro tips

Converting between formats, safely

Pick the strictest source format

Lossy formats hide bugs. Choose JSON or YAML as your source-of-truth, convert downstream as needed.

Round-trip in CI

If your converter is idempotent, your CI can verify A → B → A equals the original. Catches subtle data loss.

Numbers vs strings differ

YAML/TOML have a number type; CSV doesn’t. Quote IDs in CSV to keep leading-zero values intact.

Watch character encoding

Source format may be Latin-1 / Windows-1252; target should be UTF-8. Convert encoding before structure.

Preserve comments where you can

YAML and TOML support comments. Don’t silently drop them — they often encode intent.

Schema-aware beats blind

Use a schema to guide conversion. Field types, required-ness, and defaults survive better with structure.

Related toolsHTML to JSXCSS to JS ObjectInline Styles to CSSBootstrap to TailwindHTML to PugPug to HTML
Use Cases

When to convert SVG to JSX

Icon systems, design hand-offs, component libraries.

Icon library

Bulk-build icon components from a Figma SVG export. Type information survives: numbers stay numeric, booleans stay boolean, strings stay strings. The destination parser doesn't have to re-coerce, which avoids the &quot;'true' becomes &quot;true&quot;&quot; bug class.

round-trip safe

Logo to component

Drop a branded logo into the design system as a JSX component. Run output back through the inverse converter to verify idempotent round-trips in CI. A → B → A should produce byte-identical input — if it doesn't, you've found data loss.

type-preserving

Heroicons / Lucide

Snip a few icons out of a library and drop them inline. Comments and metadata survive where the target format supports them (YAML, TOML, HCL). The tool doesn't silently drop intent-encoded annotations, which keeps your config self-documenting.

schema-aware

Inline illustrations

Keep complex illustrations in JSX so they can take props. Pair with a schema (JSON Schema, OpenAPI, Zod, Pydantic) to catch shape drift on either side. Catch breaking changes at conversion time rather than at runtime in production.

lossless

Migration

Move SVG-as-img assets to JSX where they can be themed. Output respects target-format conventions: quoting in CSV, indent in YAML, brackets in JSON. Existing parsers don't need patches, and the result drops into legacy pipelines unchanged.

diff-clean

Animations

JSX SVG plays nicely with framer-motion and React Spring. Encoding-aware: handles UTF-8 vs UTF-16 vs Latin-1 / Windows-1252 transparently. The character-set surprise that breaks &quot;works on my machine&quot; doesn't apply here.

spec-grade
FAQ

Frequently asked questions

React's DOM bindings expect camelCased attributes for many SVG props — kebab-case names work but throw warnings.
No, but Vite and Next.js compress SVG components at build time. SVGO can be applied before pasting if you want a smaller source.
Yes — it passes through props so callers can override fill, stroke or class names.
<animate> tags pass through untouched; pair with framer-motion for richer animation control.
No. Conversion runs locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!