Créez des composants React typés à partir de SVG

Transformez le balisage SVG brut en icônes TSX réutilisables et gardez une cohérence de couleur, de taille et d'accessibilité.

Coller du SVG directement dans le code crée souvent des props incohérents et des valeurs en dur. Ce guide propose un workflow d'icônes React + TypeScript propre.

1) Normalisez l'entrée SVG

Nettoyez les groupes, métadonnées et styles en ligne inutiles avant la conversion.
Conservez le viewBox pour que la mise à l'échelle des composants reste prévisible.
Renommez les IDs et masques pour éviter les collisions quand plusieurs icônes s'affichent sur une même page.

2) Générez un composant type-safe

Utilisez des props TypeScript qui étendent les props SVG pour un support IntelliSense complet.
Définissez une largeur/hauteur par défaut et autorisez la surcharge depuis l'usage parent.
Remplacez les remplissages fixes par currentColor quand les icônes doivent hériter de la couleur du texte.

3) Intégrez à un design system

Rangez les icônes dans un dossier prévisible et exportez depuis un seul fichier barrel.
Appliquez des règles de lint ou des tests pour bloquer les attributs SVG invalides en CI.
Documentez des exemples d'usage pour les tokens de taille sémantiques et les aria-labels.

Plus de guides SVG

Convertir SVG en PNG avec fond transparent (sans halo)

Préparez les assets de design pour la documentation et l'export marketing.

Optimiser SVG pour les performances web

Réduisez le payload SVG avant de livrer les composants.

FAQ SVG vers React TypeScript

Les composants d'icônes doivent-ils utiliser une couleur fixe ou currentColor ?

Pour les icônes de design system, currentColor est généralement le mieux car la couleur peut être contrôlée depuis le texte parent ou les tokens du thème.

Comment typer les props des icônes ?

Utilisez React.SVGProps<SVGSVGElement> comme base et n'ajoutez des props personnalisées optionnelles que si nécessaire.

Puis-je garder des labels d'accessibilité flexibles ?

Oui. Exposez des props title/aria-label et utilisez aria-hidden par défaut pour les icônes décoratives.

Dois-je optimiser avant la conversion React ?

Oui. Optimiser d'abord réduit le bruit et évite d'emporter des attributs inutiles dans les fichiers TSX.

Outils utilisés dans ce workflow

Nettoyez, optimisez, puis générez la sortie TSX pour des icônes prêtes pour la production.