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

1. 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.
2. Nommer le composant. Saisissez un nom de composant React en PascalCase, tel que AlertIcon ou BrandMark.
3. 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.
4. Convertir en JSX. Cliquez sur Convertir en composant React pour générer un code JSX prêt à être copié.
5. 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

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.