SVG to JSX / React Component Converter

Paste any SVG → get a clean React component with prop-forwarding and camelCase attributes

🔒 100% di browser🆓 Gratis selamanya⚡ Tanpa signup

Catatan: Interface tool di bawah saat ini baru tersedia dalam bahasa Inggris. Kami sedang menerjemahkan UI satu per satu. Lihat tool ini dalam bahasa Inggris →

Component nameTypeScript typingReact.memo wrap

SVG source

React component

import * as React from "react";

export const Icon = React.memo((props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M12 2v20M2 12h20"/>
  </svg>
));

export default Icon;

Cara pakai

1
Paste SVG markup
Copy from Figma's dev mode, from an icon-library file, or paste raw <svg>…</svg>.
2
Pick component name and typing
Choose the component name, and JavaScript or TypeScript output.
3
Copy the component
Attributes are camelCased, style becomes an object, and props are forwarded to the root <svg>.

Tentang SVG to JSX / React Component Converter

Free SVG to JSX converter. Paste any SVG markup to get a clean React functional component with camelCased attributes, prop forwarding, and TypeScript typing. Ideal for turning icon exports from Figma, Sketch, or Illustrator into ready-to-use React components. SVG to JSX / React Component Converter di 712 Tools jalan sepenuhnya di browser kamu pakai JavaScript API native - tidak ada server yang pernah melihat data kamu. Artinya hasil instan, privasi penuh, dan tanpa batas upload.

Buat sesi debug, quick sanity check, atau incident produksi - tool ini gratis dipakai sebanyak yang kamu butuh. Tanpa watermark, tanpa signup, dan tanpa ads di dalam tool.

Pertanyaan yang sering ditanyakan

What gets transformed?

kebab-case attributes → camelCase (stroke-width → strokeWidth), class → className, style strings → objects, and the root <svg> forwards all props for size, color, and event handlers.

What about SVGO optimization?

This tool converts to JSX - for shrinking SVGs first, use the SVG Optimizer tool alongside it.

Is my SVG uploaded?

No. Conversion is pure string manipulation and runs entirely in your browser.

Baca lebih lanjut

5 menit baca

The SVG workflow that keeps your React bundle small

How to take a Figma export from 15KB to 400 bytes, convert it into a clean React component, and ship icons without a bloated icon library.

JSON to CSV

Convert JSON arrays to downloadable CSV

Timestamp Converter

Convert between Unix time, ISO 8601, and human-readable dates

Markdown to HTML

Convert Markdown to clean HTML with live preview

YAML ↔ JSON

Convert YAML to JSON and back with full syntax validation

JSON → TypeScript

Generate TypeScript interfaces or types from a JSON sample

Base Converter

Convert between binary, octal, decimal, and hexadecimal