Convertisseur SVG en Composant React
Collez ou importez n'importe quel SVG et obtenez un composant React propre, avec des attributs en camelCase, un spread de props sur la racine et une signature TypeScript optionnelle. Gratuit, privé et instantané.
Déposez votre SVG ici ou cliquez pour importer
Accepte les fichiers .svg, ou collez du code SVG ci-dessous
Pourquoi convertir SVG en React ici
JSX camelCase Propre
Chaque attribut SVG est renommé pour React : class devient className, stroke-width devient strokeWidth et clip-path devient clipPath, afin que le composant compile sans avertissements.
Styles Inline en Objets
Un attribut style comme fill:red;stroke-width:2 devient un objet style React correct, avec des clés en camelCase et des préfixes vendeur capitalisés, au lieu d'une chaîne que React rejette.
Spread de Props sur la Racine
Le SVG racine reçoit un spread {...props} après ses propres attributs, afin que les utilisateurs du composant puissent passer className, width, height ou onClick et surcharger les valeurs par défaut.
TypeScript ou JavaScript
Activez une option pour émettre un composant typé avec React.SVGProps<SVGSVGElement>, ou gardez-le en JavaScript simple. Nommez le composant comme vous le souhaitez.
Attributs avec Espace de Noms Corrigés
xlink:href devient xlinkHref et xml:space devient xmlSpace, tandis que les attributs data-* et aria-* sont laissés intacts, afin que les dégradés, masques et accessibilité continuent de fonctionner.
100% Privé et Gratuit
La conversion se fait entièrement dans votre navigateur via le parseur intégré. Votre SVG n'est jamais importé, sans inscription et sans limites.
Comment convertir SVG en composant React
Ajoutez votre SVG
Glissez-déposez un fichier .svg, cliquez pour parcourir, ou collez votre code SVG dans la zone.
Définissez les options
Nommez votre composant, activez TypeScript si vous souhaitez une signature typée, et choisissez si vous voulez diffuser les props sur le SVG racine.
Obtenez du JSX propre
Le convertisseur renomme class en className, met tous les attributs en camelCase, transforme les styles inline en objet style et corrige les attributs avec espace de noms comme xlink:href.
Copiez et collez
Cliquez sur copier et déposez le composant directement dans votre projet React, Next.js ou TypeScript. Aucune étape de compilation, aucune dépendance.
Choisissez le bon outil
Pourquoi cette page existe
Use the SVG to React converter when you need a vector as a real component, not a static asset. It camelCases every attribute, turns inline styles into a style object, spreads props on the root, and can emit TypeScript.
Idéal pour
- Turning Figma, Illustrator, or Inkscape icons into JSX components
- Building an icon set where each SVG accepts className, size, and color props
- Inlining a logo as a component instead of an img tag or background
Outils connexes dont vous aurez probablement besoin ensuite
FAQ SVG en React
Collez votre code SVG ou importez un fichier .svg, et l'outil vous retourne un composant React prêt à l'emploi. Il renomme les attributs en camelCase, convertit les styles inline en objet style, diffuse les props sur la racine et vous permet de définir le nom du composant et d'activer TypeScript. Copiez la sortie dans votre projet et importez-la comme n'importe quel autre composant.
JSX n'est pas du HTML. React attend className à la place de class, des attributs en camelCase comme strokeWidth à la place de stroke-width, et un objet style à la place d'une chaîne style. Un SVG brut collé dans JSX génère généralement des erreurs ou ne s'affiche pas, ce que ce convertisseur corrige précisément pour vous.
Oui. Activez l'option TypeScript et le composant est typé avec props: React.SVGProps<SVGSVGElement> et un import React, prêt à être intégré dans un fichier .tsx. Laissez-le désactivé pour une sortie JavaScript simple.
Avec le spread activé, le SVG racine se termine par {...props}, placé après ses propres attributs. Cela permet à quiconque utilise votre composant de passer className, width, height, fill ou des gestionnaires d'événements pour surcharger les valeurs par défaut, ce qui est le fonctionnement standard de la plupart des bibliothèques d'icônes.
Non. La conversion se fait entièrement dans votre navigateur via le parseur SVG natif. Rien n'est transmis nulle part, ce qui le rend sûr pour les ressources de marque privées et les icônes propriétaires.
Convertisseur SVG en Composant React
Collez ou importez n'importe quel SVG et obtenez un composant React propre, avec des attributs en camelCase, un spread de props sur la racine et une signature TypeScript optionnelle. Gratuit, privé et instantané.