⚛️ SVG to JSX

Convert SVG markup into React JSX-compatible code.

About SVG to JSX

Paste raw SVG markup and get JSX-ready output. Kebab-case attributes are camel-cased, class becomes className, inline styles become objects, and editor metadata is stripped.

How to use

  1. Copy SVG markup from a file or design tool export.
  2. Paste it into the input panel.
  3. Optionally wrap the output in a React component template.
  4. Copy the JSX into your component.

Common use cases

  • Embedding icons exported from Figma or Sketch as React components.
  • Inlining hero illustrations without setting up a sprite system.
  • Converting design system SVGs into per-component snippets.
  • Cleaning up an SVG without hand-editing each attribute.

Tips

  • XML declarations, comments, and editor metadata are removed automatically.
  • Numeric attribute values stay quoted — JSX accepts them either way.
  • For dynamic colors, swap fill values for currentColor after copying.

FAQ

What gets transformed?
Kebab-case attributes become camelCase, class becomes className, inline styles become objects, and editor metadata (like XML declarations and comments) is stripped.
Does it preserve viewBox and other SVG-specific attributes?
Yes. Attributes that JSX expects in camelCase — viewBox, preserveAspectRatio, clipPath, etc. — are converted correctly.
Can I drop the result straight into a React component?
Yes. The output is JSX you can paste directly into a function component or wrap in a generated component template.
How do I make the icon use my theme color?
After copying, replace fill or stroke values with currentColor so the icon picks up the surrounding text color via CSS.

More tools

JSON

🗂️ JSON Formatter 🔷 JSON to TypeScript 🔍 JSON Diff 🔤 JSON Sort 📊 JSON ↔ CSV 📝 JSON ↔ YAML 🛡️ JSON to Validator Schema

Code

🧪 Regex Tester 📷 SVG to Raster ⏱️ Cron Decoder 📸 Code Snippet to Image 📄 Text Diff 📝 Markdown Preview 🏷️ SemVer Checker 🔑 JWT Decoder

Ornaments

🎨 Gradients 🫧 Blob Generator 〰️ Wave Generator

Image

🗜️ Image Compressor 📐 Image Resizer ✂️ Image Cropper 🖼️ Image Format Converter 🔏 Image Watermark

Audio

🎵 MP3 Tag Editor

Web / SEO

🔍 Meta Tag Preview 🕵️ User Agent Parser 🖼️ OG Image Builder

Generators

📱 QR Code Generator 📜 Lorem Ipsum Generator 👤 Avatar Generator ⭐ Favicon Generator 🪪 UUID Generator 🎡 Wheel of Names

PDF

📄 PDF Merger 📑 Image to PDF 🤏 PDF Compressor ✂️ PDF Splitter 🗂️ PDF Page Manager 💧 PDF Watermark ✍️ PDF Signature 🖼️ PDF to Image

Time

🍅 Pomodoro Timer