Convertisseur SVG en React/JSX
Convertissez vos fichiers SVG collés ou téléversés en composants React JSX propres avec des attributs en camelCase, des props TypeScript optionnelles, forwardRef, React.memo, l'accessibilité du titre, la conversion des styles en objets et un rendu sécurisé.
Votre bloqueur de pubs nous empêche d’afficher des annonces
MiniWebtool est gratuit grâce aux annonces. Si cet outil vous a aidé, soutenez-nous avec Premium (sans pubs + outils plus rapides) ou ajoutez MiniWebtool.com à la liste blanche puis rechargez la page.
- Ou passez à Premium (sans pubs)
- Autorisez les pubs pour MiniWebtool.com, puis rechargez
Convertisseur SVG en React/JSX
Le Convertisseur SVG en React/JSX transforme les fichiers SVG bruts en composants React réutilisables. Il est conçu pour les développeurs qui ont besoin de composants d'icônes plus propres, de marques de logo, d'illustrations de produits et d'actifs de système de conception (design systems) sans avoir à corriger manuellement chaque attribut SVG. Collez le balisage SVG ou téléversez un fichier .svg en UTF-8, choisissez les options React dont vous avez besoin, puis copiez le composant généré dans votre projet.
Comment l'utiliser
- Coller ou téléverser le SVG. Collez un fichier SVG complet dans l'éditeur ou téléversez un fichier .svg en UTF-8.
- Nommer le composant. Saisissez un nom de composant React en PascalCase, tel que AlertIcon ou BrandMark.
- Choisir les options React. Sélectionnez les options TypeScript, forwardRef, React.memo, l'accessibilité du titre, la conversion de style, l'assainissement et la propagation des props.
- Convertir en JSX. Cliquez sur Convertir en composant React pour générer un code JSX prêt à être copié.
- Vérifier et copier. Vérifiez le résumé de la conversion, les avertissements et le code généré avant de le copier dans votre projet React.
Ce que le convertisseur prend en charge
stroke-width, fill-rule et clip-path sont réécrits en strokeWidth, fillRule et clipPath.{...props}, forwardRef, React.memo, l'exportation par défaut, l'exportation nommée et les props TypeScript permettent d'intégrer plus facilement le résultat dans une base de code React.javascript: afin que le JSX généré soit plus sûr à inspecter avant utilisation.Conseils pour de meilleurs composants SVG React
Conservez la viewBox d'origine dans la mesure du possible, car elle contrôle la mise à l'échelle du SVG. Pour les systèmes d'icônes, width="1em" et height="1em" permettent à l'icône d'hériter de la taille du texte tout en permettant aux appelants de surcharger les dimensions avec des props. Utilisez un nom de composant en PascalCase descriptif, gardez les SVG décoratifs accessibles avec aria-hidden le cas échéant, et utilisez la prop title pour les icônes significatives qui transmettent des informations.
FAQ
Qu'est-ce que ce convertisseur SVG en React modifie ?
Il analyse le XML SVG et réécrit les attributs SVG en JSX compatible avec React, y compris className, les attributs SVG en camelCase, les objets de style optionnels, les props, forwardRef, l'accessibilité du titre et la syntaxe d'exportation.
Puis-je téléverser un fichier SVG ?
Oui. Vous pouvez téléverser un fichier .svg en UTF-8 ou coller du balisage SVG. Les fichiers téléversés sont lus comme du texte et convertis en JSX sur le serveur.
Assainit-il le code SVG ?
L'assainissement est activé par défaut. Le convertisseur supprime les balises script, les gestionnaires d'événements en ligne et les liens javascript: afin que le composant généré soit plus sûr à vérifier avant utilisation.
Pourquoi convertir les attributs de style en objets ?
React s'attend à ce que la prop style soit un objet lors de l'écriture de JSX. La conversion des chaînes de style en objets permet une compilation propre de la sortie et conserve les noms de propriétés CSS en camelCase.
Quel est le meilleur format de nom de composant ?
Utilisez le PascalCase comme AlertIcon ou BrandMark. Le convertisseur nettoie les caractères non valides et s'assure que le résultat commence par un identifiant de composant React valide.
Citez ce contenu, cette page ou cet outil comme suit :
"Convertisseur SVG en React/JSX" sur https://MiniWebtool.com/fr// de MiniWebtool, https://MiniWebtool.com/
par l'équipe MiniWebtool. Mis à jour : 2026-05-22