Convertir un SVG en composant React
Collez un SVG et obtenez un composant React (.tsx) prêt à l'emploi, avec tous les attributs convertis en camelCase (className, strokeWidth...) et une prop props propagée.
Que fait exactement cette conversion ?
JSX (utilisé par React) n'accepte pas les attributs HTML/SVG en kebab-case comme stroke-width ou class : ils doivent être écrits en camelCase (strokeWidth, className). Cet outil réécrit automatiquement tous les attributs du SVG selon cette convention et enveloppe le résultat dans une fonction composant TypeScript, prête à être copiée dans un projet React.
Le composant généré accepte-t-il des props personnalisées (couleur, taille) ?
Oui, le composant propage toutes les props reçues ({'{...props}'}) directement sur la balise <svg> : vous pouvez donc passer className, width, height, onClick, etc. depuis le composant parent comme sur n'importe quel élément SVG.
Le composant fonctionne-t-il aussi en JavaScript pur (pas TypeScript) ?
Le fichier généré est en TypeScript (avec typage des props), mais retirer la ligne d'import de type et l'annotation : SVGProps<SVGSVGElement> suffit à l'utiliser directement dans un projet JavaScript classique.
Traitement 100% local : la génération du composant s'effectue entièrement dans votre navigateur, votre SVG n'est jamais envoyé à un serveur.