Convertisseur SVG vers JSX/React

Convertissez SVG en composants React JSX en ligne. Transforme les attributs SVG en camelCase, encapsule en composant React. Gratuit et instantané.

Component:

Wrap as Component

SVG

JSX / React

À propos de la conversion SVG vers JSX

L'utilisation d'icônes et de graphiques SVG dans React nécessite la conversion des attributs SVG en syntaxe compatible JSX. Cet outil gère automatiquement toutes ces transformations. Il peut également encapsuler le SVG dans un composant React avec une instruction d'export.

𝕏 Twitter in LinkedIn

Notez cet outil

4.8 / 5 · 55 avis

Plus d'outils

JSXHTML vers JSX TWCSS vers Tailwind 🖼️Convertisseur Image Base64 JSFormateur JS/HTML

Restez informé

Recevez des astuces dev et les nouveaux outils chaque semaine.

Pas de spam. Désabonnez-vous à tout moment.

Enjoy these free tools?

☕Buy Me a Coffee

Comment utiliser

Collez votre balisage SVG dans le panneau d'entrée
Définissez le nom du composant et activez les options d'encapsulation
Cliquez sur Convertir pour générer du SVG compatible JSX
Copiez le résultat dans votre fichier de composant React

Cas d'utilisation courants

Convertir des icônes SVG de Figma ou Illustrator en composants React
Construire une bibliothèque d'icônes avec des composants React SVG réutilisables
Migrer des assets SVG de HTML statique vers React
Optimiser les SVG inline pour le rendu React

Questions fréquentes

Quels attributs SVG sont convertis ?

Tous les attributs SVG en kebab-case sont convertis en camelCase : stroke-width → strokeWidth, fill-opacity → fillOpacity, etc.

Peut-on encapsuler le SVG en composant React ?

Oui. Activez l'option 'Encapsuler en composant' pour générer un composant React complet avec export.

Pourquoi supprimer xmlns en React ?

L'attribut xmlns n'est nécessaire que pour les fichiers SVG autonomes. En JSX/React, il est inutile.

Gère-t-il les styles inline ?

Oui. Les chaînes de style inline sont converties en objets style JavaScript avec des propriétés en camelCase.