À propos de cet outil
L'outil SVG vers composant JSX convertit un balisage SVG brut en un composant React propre, à la manière de SVGR, mais entièrement dans votre navigateur sans rien téléverser. Collez une icône exportée d'un outil de design et obtenez un composant que vous pouvez importer et styliser. Il analyse le SVG avec DOMParser et signale une erreur claire si le balisage est malformé.
Chaque attribut SVG à trait d'union ou avec espace de noms est mis en camelCase vers son nom React — stroke-width vers strokeWidth, fill-rule vers fillRule, clip-path vers clipPath, stop-color vers stopColor, xlink:href vers xlinkHref, xmlns:xlink vers xmlnsXlink — tandis que les attributs data-* et aria-* sont laissés tels quels. Les chaînes de style en ligne deviennent des objets de style, les éléments vides comme path et circle sont auto-fermés, et les props sont diffusées sur la racine <svg {...props}> pour que le composant reste configurable. Des bascules optionnelles vous permettent de remplacer les valeurs fill et stroke codées en dur par currentColor (pour que l'icône hérite de la couleur du texte), de retirer les width et height pour qu'elle s'adapte à son conteneur, et d'envelopper le composant avec forwardRef pour exposer le nœud <svg> sous-jacent.
Choisissez une sortie JavaScript ou TypeScript : la variante TypeScript type les props en React.SVGProps<SVGSVGElement> et, avec forwardRef activé, utilise forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Le composant est émis en fonction fléchée exportée (export const Icon = (props) => (...)), avec le nom et l'indentation de votre choix, prêt à coller dans un module d'icônes.