Informazioni su questo strumento
Lo strumento Da SVG a componente JSX converte il markup SVG grezzo in un componente React pulito, come fa SVGR, ma interamente nel tuo browser senza nulla caricato. Incolla un'icona esportata da uno strumento di design e ottieni un componente che puoi importare e stilizzare. Analizza l'SVG con DOMParser e segnala un errore chiaro se il markup è malformato.
Ogni attributo SVG con trattino o namespace viene reso in camelCase al suo nome React — stroke-width in strokeWidth, fill-rule in fillRule, clip-path in clipPath, stop-color in stopColor, xlink:href in xlinkHref, xmlns:xlink in xmlnsXlink — mentre gli attributi data-* e aria-* vengono lasciati così come sono. Le stringhe di stile inline diventano oggetti style, gli elementi vuoti come path e circle vengono autochiusi, e le prop vengono spread sulla radice <svg {...props}> così il componente resta configurabile. Interruttori opzionali permettono di sostituire i valori fill e stroke fissi con currentColor (così l'icona eredita il colore del testo), rimuovere width e height così scala al suo contenitore, e racchiudere il componente con forwardRef per esporre il nodo <svg> sottostante.
Scegli output JavaScript o TypeScript: la variante TypeScript tipizza le prop come React.SVGProps<SVGSVGElement> e, con forwardRef attivo, usa forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Il componente viene emesso come arrow function esportata (export const Icon = (props) => (...)), con il nome e l'indentazione che scegli, pronto da incollare in un modulo di icone.