De SVG à React : ce qui change vraiment sous le capot
Convertir un fichier SVG en composant React propre ne se résume pas à un simple copier-coller : c’est une transformation qui convertit un balisage de style XML en JSX valide. Lorsque vous utilisez un convertisseur, attendez-vous à ce que stroke-width devienne strokeWidth, que class passe à className, et que des valeurs numériques comme width="24" soient converties en {24}. Même les styles en ligne comme style="fill: red" se transforment en objets JavaScript tels que style={{ fill: 'red' }}. Ces modifications ne sont pas superficielles : elles sont essentielles pour que les SVGs fonctionnent avec la syntaxe JSX de React.
Le fonctionnement de la conversion
Le JSX de React exige une syntaxe plus stricte que le SVG brut. Les attributs en casse-kebab — comme stroke-linecap ou clip-path — doivent être convertis en casse-camel (strokeLinecap, clipPath) pour respecter les conventions de nommage de JavaScript. Par ailleurs, class devient className car class est un mot réservé en JavaScript. Les attributs numériques des SVGs, comme width ou r dans un cercle, passent de chaînes de caractères à des expressions ({12}) afin que React les traite comme des nombres plutôt que du texte. Les styles en ligne subissent une refonte similaire et deviennent des objets comme {{ fill: 'blue', stroke: 'red' }} pour s’adapter au système de style basé sur des objets du JSX.
TypeScript apporte sécurité et clarté
Lorsque le résultat est en TSX, le convertisseur ajoute les typages stricts de TypeScript. Le composant généré bénéficie de SVGProps<SVGSVGElement> pour offrir l’autocomplétion et la vérification des types pour les props spécifiques aux SVGs, comme className, onClick ou style. Les props optionnelles comme title sont typées explicitement, réduisant les erreurs à l’exécution. Que vous utilisiez du JSX ou du TSX, le convertisseur préserve l’intégrité visuelle du SVG tout en le rendant composable et maintenable, permettant de transmettre directement les props à l’élément racine <svg> pour un redimensionnement ou un style dynamique.
Pourquoi est-ce important ?
Cette conversion ne se limite pas à la syntaxe : elle permet d’intégrer les SVGs dans les flux de travail modernes de React. En automatisant ces transformations, des outils comme SVGCode et SVGR permettent aux développeurs d’intégrer des graphiques vectoriels évolutifs sans se perdre dans les particularités du XML ou dans un balisage surchargé. Résultat ? Des fichiers plus légers, de meilleures performances et des bases de code plus propres qui s’intègrent parfaitement à l’écosystème React. Pour les équipes gérant de grandes bibliothèques d’icônes, l’automatisation transforme un processus manuel fastidieux en une optimisation en un clic, libérant du temps pour se concentrer sur ce qui compte vraiment.
Source : DEV Community. Synthèse éditoriale assistée par IA — TechnoExpress.