SVG to JSX / React Component Converter

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

🔒 100 % in-browser🆓 Gratuit pour toujours⚡ Pas de signup

Note : L'interface de l'outil ci-dessous n'est actuellement disponible qu'en anglais. On traduit les UI une par une. Voir cet outil en anglais →

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;

Comment ça marche

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>.

À propos de 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 sur 712 Tools tourne entièrement dans ton browser via des APIs JavaScript natives - aucun server ne voit jamais tes données. Résultats instantanés, privacy complète, et aucune limite d'upload.

Que ce soit pour une session de debug, un sanity check rapide ou un incident en prod, cet outil est gratuit à utiliser autant que tu veux. Pas de watermarks, pas de signup et pas d'ads dans l'outil.

Questions fréquentes

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.

Lire plus

5 min de lecture

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