Should icon components use fixed color or currentColor?

For design-system icons, currentColor is usually best because color can be controlled from parent text or theme tokens.

How do I type icon props?

Use React.SVGProps as a base and add optional custom props only when needed.

Can I keep accessibility labels flexible?

Yes. Expose title/aria-label props and default to aria-hidden for decorative icons.

Should I optimize before React conversion?

Yes. Optimizing first reduces noise and avoids carrying unnecessary attributes into TSX files.

Construire des composants React typés à partir de SVG

Transformez le balisage SVG brut en icônes TSX réutilisables et gardez la couleur, la taille et le comportement d'accessibilité cohérents.

Coller SVG directement dans le code crée souvent des accessoires incohérents et des valeurs codées en dur. Ce guide vous présente un flux de travail propre aux icônes React + TypeScript.

1) Normaliser l'entrée SVG

Nettoyez les groupes, métadonnées et styles en ligne inutiles avant la conversion.
Préservez viewBox afin que la mise à l'échelle des composants reste prévisible.
Renommez les identifiants et les masques pour éviter les collisions lorsque plusieurs icônes s'affichent sur une seule page.

2) Générer un composant de type sécurisé

Utilisez les accessoires TypeScript étendant les accessoires SVG pour une prise en charge complète d'IntelliSense.
Largeur/hauteur par défaut et autorisation des remplacements de l'utilisation du parent.
Remplacez les remplissages fixes par currentColor lorsque les icônes doivent hériter de la couleur du texte.

3) Intégrer dans un système de conception

Stockez les icônes dans un dossier prévisible et exportez-les à partir d'un seul fichier Barrel.
Appliquez des règles ou des tests de charpie pour bloquer les attributs SVG non valides dans CI.
Exemples d'utilisation de documents pour les jetons de taille sémantique et les étiquettes aria.

Plus de guides SVG

Convertir SVG to PNG avec un arrière-plan transparent

Préparez les éléments de conception pour les documents et l'exportation marketing.

Optimiser SVG pour les performances Web

Réduisez la charge utile SVG avant d'expédier les composants.

FAQ SVG to React TypeScript

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

Pour les icônes du système de conception, currentColor est généralement le meilleur car la couleur peut être contrôlée à partir du texte parent ou des jetons de thème.

Comment saisir des accessoires d'icône ?

Utilisez React.SVGProps<SVGSVGElement> comme base et ajoutez des accessoires personnalisés facultatifs uniquement lorsque cela est nécessaire.

Puis-je conserver la flexibilité des étiquettes d'accessibilité ?

Oui. Exposez les accessoires de titre/aria-label et par défaut aria-hidden pour les icônes décoratives.

Dois-je optimiser avant la conversion React ?

Oui. L'optimisation réduit d'abord le bruit et évite de transporter des attributs inutiles dans les fichiers TSX.

Outils utilisés dans ce flux de travail

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