Convertire un SVG in un componente React (JSX)
Trasforma un SVG in un componente React/JSX pronto all'uso (attributi camelCase, nome personalizzato).
The SVG receives {...props}: you can pass className, width, style, etc. Attributes are converted to camelCase for React.
🔒 100 % lato client — nessun dato inviato
Trasforma qualsiasi SVG in un componente React riutilizzabile: gli attributi passano al camelCase (stroke-width → strokeWidth), il nome del componente è personalizzabile e viene aggiunto {...props}. Tutto viene generato localmente.
What is it for?
- ▸ Creare un componente icona React da un SVG
- ▸ Integrare un pittogramma in una libreria di componenti
- ▸ Rendere un SVG personalizzabile tramite props (className, colore)
- ▸ Convertire un lotto di icone esportate
FAQ
Perché aggiungere {...props}?
Per poter passare className, width, height, style o gestori di eventi all'SVG dall'esterno del componente.
I tag come linearGradient vengono preservati?
Sì, il maiuscolo/minuscolo degli elementi SVG (linearGradient, clipPath…) viene preservato come richiede React.
Posso cambiare il colore in seguito?
Sì, se l'SVG usa currentColor, il colore segue la proprietà CSS color del componente genitore.
È compatibile con TypeScript?
L'output è JSX semplice; per TypeScript aggiungi un tipo per le props, ad esempio (props: React.SVGProps<SVGSVGElement>).