Convertisseur SVG en React JSX

    Transformez vos fichiers et balises SVG en composants React JSX prêts pour la production. Corrigez automatiquement les noms d'attributs et résolvez les incompatibilités en un clic.

    Entrée SVG

    Glissez-déposez ou cliquez pour charger un SVG

    ou collez votre code directement

    Sortie JSX

    Options de conversion

    Ajouter les définitions d'interfaces
    Envelopper le composant avec memo
    Utiliser des guillemets doubles pour les attributs
    Supprimer les attributs d'identifiants id

    Reste sur votre appareil. Tout le traitement s'exécute dans votre navigateur. Vos saisies ne sont jamais transmises à nos serveurs.

    Mode d'emploi

    Suivez ces étapes simples pour obtenir les meilleurs résultats.

    1Collez le balisage SVG brut ici : qu'il provienne de Figma, d'Illustrator ou d'une bibliothèque d'icônes, déposez-le simplement dans l'éditeur.
    2La validation est instantanée : un badge 'SVG valide' confirme la conformité du code inséré.
    3Ajustez vos options : activez TypeScript pour générer des fichiers .tsx, ajoutez React.memo pour optimiser les performances ou nettoyez les attributs d'ID conflictuels.
    4Examinez le code JSX obtenu : les attributs en kebab-case sont automatiquement transcrits en camelCase au sein d'un composant React réutilisable.
    5Copiez le composant pour l'intégrer directement dans votre projet, ou réinitialisez le formulaire pour convertir une autre icône.

    Foire aux questions

    Trouvez des réponses aux questions fréquentes sur cet outil.

    React s'appuie sur la syntaxe JSX qui obéit aux règles de JavaScript. Les outils de design exportent des balises avec des attributs séparés par des tirets (kebab-case) comme stroke-width, alors que React exige une casse de chameau (camelCase) comme strokeWidth. De plus, 'class' doit devenir 'className' et les styles en ligne doivent être convertis en objets JavaScript.

    Notre outil convertit tous les attributs kebab-case en camelCase (fill-opacity devenant fillOpacity, stroke-linecap devenant strokeLinecap), remplace class par className, transforme les chaînes de styles en ligne en objets JavaScript et supprime les métadonnées superflues telles que les déclarations xmlns.

    L'option TypeScript type rigoureusement votre composant en lui associant l'interface React.SVGProps<SVGSVGElement>. Vous bénéficiez ainsi de l'autocomplétion pour l'ensemble des propriétés SVG (width, height, fill, événements) sans aucune erreur de typage.

    React.memo est recommandé pour les icônes fréquemment réemployées dans des listes ou des tableaux volumineux. Il évite les rendus superflus lorsque les propriétés du composant ne changent pas.

    Les logiciels comme Figma génèrent des identifiants génériques (ex. id='a') pour les dégradés et les masques. Si le même composant est instancié plusieurs fois sur une même page, ces ID dupliqués provoquent des anomalies visuelles dans le DOM.

    Enregistrez le code sous forme de composant (ex. MyIcon.tsx) et importez-le dans vos pages. Grâce à la décomposition {...props}, vous pouvez ajuster dynamiquement ses dimensions ou ses couleurs : <MyIcon width={24} fill="currentColor" className="my-icon" />.

    Oui. En remplaçant les couleurs fixes par 'currentColor', le tracé hérite de la couleur de texte de son conteneur parent (color: blue en CSS rendra automatiquement l'icône bleue), facilitant grandement la gestion des thèmes clairs et sombres.

    Comment ça fonctionne

    Comprenez la méthodologie, les formules et les principes fondamentaux de cet outil.

    Transformez vos exports graphiques en composants React prêts pour la production

    Les graphistes privilégient le format vectoriel SVG, mais son intégration directe dans du code React pose des défis récurrents. Les exports issus de Figma ou d'Illustrator comportent des attributs incompatibles avec la syntaxe JSX. Notre convertisseur SVG vers React JSX gratuit traduit ce balisage brut en un composant React optimisé et typé en quelques secondes, sans avertissements de console.

    Pourquoi les fichiers SVG bruts provoquent-ils des erreurs dans React ?

    La syntaxe JSX de React repose sur JavaScript. Les conventions de nommage du langage s'appliquent donc rigoureusement, créant des incompatibilités lors de l'insertion directe d'un SVG traditionnel :

    Kebab-case vs CamelCase : le format SVG utilise des tirets pour de nombreux attributs (stroke-width, fill-opacity). JavaScript n'admettant pas de tirets dans les noms de propriétés d'objets, React exige des versions en camelCase (strokeWidth, fillOpacity).

    Le conflit du mot réservé « class » : en HTML, l'attribut est class. En JavaScript, class est un mot-clé réservé pour la déclaration de classes. React impose l'utilisation de className.

    Styles en ligne : les fichiers SVG standards écrivent les styles sous forme de chaînes de caractères : style="fill: blue". React requiert un objet JavaScript : style={{ fill: 'blue' }}.

    Espaces de noms inutiles : les attributs xmlns ou xmlns:xlink indispensables aux fichiers autonomes sont superflus dans une arborescence de composants React.

    Conflits d'identifiants dupliqués : un dégradé exporté depuis Figma comporte souvent un identifiant générique comme id="a". L'utilisation répétée de la même icône sur une page génère des collisions d'ID qui corrompent l'affichage des masques.

    Un composant React propre et moderne

    Notre outil génère un composant prêt à l'emploi respectant les meilleures pratiques de développement :

    JSX
    import React from "react"; const SvgIcon = React.memo( (props: React.SVGProps<SVGSVGElement>) => ( <svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" {...props} > <rect width="100%" height="100%" fill="#f8f8f8" /> <path fill="#31343C" d="M112.215 126.065v34.4h-8.38..." /> </svg> ) ); export default SvgIcon;

    La décomposition {...props} vous permet de redéfinir la largeur, la hauteur ou la couleur de votre icône directement depuis le composant parent.

    Conseil d'architecte : concevoir une bibliothèque d'icônes pérenne

    Pour structurer efficacement vos ressources graphiques :

    1. Convertissez vos SVG avec les options TypeScript et React Memo activées.
    2. Classez chaque icône dans un fichier propre sous components/icons.
    3. Remplacez les teintes fixes par "currentColor".
    4. Exportez l'ensemble depuis un fichier index centralisé.

    L'utilisation de fill="currentColor" permet de piloter la teinte des icônes directement en CSS sans surcharger le code JavaScript.

    À qui s'adresse cet utilitaire ?

    Développeurs front-end souhaitant éviter la mise en conformité manuelle de dizaines d'attributs lors de chaque livraison graphique.

    Ingénieurs Design System constituant des collections d'icônes cohérentes et typées.

    Développeurs Full-Stack cherchant une intégration rapide et fiable sans avoir à mémoriser toutes les particularités de JSX.

    Vos codes sources restent strictly confidentiels

    Toutes les opérations de transformation se déroulent localement dans votre navigateur. Aucun code SVG n'est téléversé vers un serveur externe.

    Dernière mise à jour :

    Outils pour développeurs associés

    Découvrez d'autres calculateurs et outils pour accélérer votre travail.

    Convertisseur de couleurs

    Convertissez les couleurs entre les formats HEX, RGB, HSL, HSV, CMYK et OKLCH.

    Encodeur / Décodeur Base64

    Encodez des images en Base64 et décodez des chaînes Base64 en fichiers graphiques.

    Compresseur d'images

    Compressez et optimisez des images JPG, PNG et WebP sans perte de qualité visible.

    Formateur JSON

    Embellissez, validez et minifiez vos données JSON avec coloration syntaxique et détection d'erreurs.