Convertir un SVG en composant React (JSX)
Transformez un SVG en composant React/JSX prêt à l’emploi (attributs camelCase, nom personnalisable).
Le SVG reçoit {...props} : vous pouvez passer className, width, style, etc. Les attributs sont convertis en camelCase pour React.
🔒 100 % côté client — aucune donnée envoyée
Transformez n'importe quel SVG en composant React réutilisable : les attributs sont convertis en camelCase (stroke-width → strokeWidth), le nom du composant est personnalisable et {...props} est ajouté. Tout est généré localement.
À quoi ça sert ?
- ▸ Créer un composant d'icône React depuis un SVG
- ▸ Intégrer un pictogramme dans une bibliothèque de composants
- ▸ Rendre un SVG stylable via props (className, couleur)
- ▸ Convertir un lot d'icônes exportées
FAQ
Pourquoi ajouter {...props} ?
Pour pouvoir passer className, width, height, style ou des gestionnaires d'événements au SVG depuis l'extérieur du composant.
Les balises comme linearGradient sont-elles préservées ?
Oui, la casse des éléments SVG (linearGradient, clipPath…) est conservée telle que React l'exige.
Puis-je changer la couleur ensuite ?
Oui, si le SVG utilise currentColor, la couleur suit la propriété CSS color du composant parent.
Est-ce compatible TypeScript ?
La sortie est du JSX simple ; pour TypeScript, ajoutez un typage des props, par exemple (props: React.SVGProps<SVGSVGElement>).