Convertir SVG en Composant React

Utiliser SVG comme composants React vous donne un contrôle total sur le style, les animations et l'interactivité via les props. Contrairement aux balises image ou aux arrière-plans CSS, les composants SVG en ligne peuvent répondre aux changements d'état, accepter des couleurs dynamiques via les props et participer au cycle de vie du composant React. Cette approche permet également le tree-shaking ; les icônes inutilisées sont automatiquement exclues des bundles de production par les bundlers modernes comme Webpack et Vite.

React utilise le camelCase pour les attributs DOM au lieu de la convention kebab-case du HTML. SVG a de nombreux attributs avec tirets comme stroke-width, fill-opacity et clip-rule qui doivent devenir strokeWidth, fillOpacity et clipRule en JSX. L'attribut class devient className, et les chaînes de style en ligne doivent être converties en objets JavaScript avec des noms de propriétés en camelCase et des valeurs de chaîne ou numériques.

Utiliser SVGProps<SVGSVGElement> des définitions de types de React donne à votre composant une sécurité de types complète pour tous les attributs SVG valides. Cela signifie que les consommateurs obtiennent l'autocomplétion pour les propriétés comme viewBox, fill, stroke, opacity et tous les attributs de présentation. Combiné avec votre propre interface de props personnalisés, TypeScript détecte les fautes de frappe d'attributs et les valeurs invalides à la compilation plutôt qu'à l'exécution.

Envelopper les composants d'icônes avec React.memo empêche les re-rendus inutiles lorsque les composants parents se mettent à jour mais que les props de l'icône restent inchangés. Cela est particulièrement bénéfique dans les vues de liste avec de nombreuses icônes. L'enveloppe forwardRef permet aux composants parents d'accéder directement au nœud DOM SVG pour les mesures, les observateurs d'intersection ou les animations impératives sans casser l'abstraction du composant.