Convertitore SVG a JSX/React

Converti SVG in componenti React JSX online. Trasforma attributi SVG in camelCase, incapsula come componente React. Gratuito e istantaneo.

Component:

Wrap as Component

SVG

JSX / React

Informazioni sulla conversione SVG a JSX

L'uso di icone e grafiche SVG in React richiede la conversione degli attributi SVG in sintassi compatibile con JSX. Questo strumento gestisce automaticamente tutte le trasformazioni e può incapsulare l'SVG in un componente React con istruzione export.

𝕏 Twitter in LinkedIn

Valuta questo strumento

4.8 / 5 · 55 valutazioni

Altri strumenti

JSXHTML a JSX TWCSS a Tailwind 🖼️Convertitore Immagine Base64 JSFormattatore JS/HTML

Resta aggiornato

Ricevi consigli dev e nuovi strumenti ogni settimana.

Niente spam. Cancella quando vuoi.

Enjoy these free tools?

☕Buy Me a Coffee

Come usare

Incolla il markup SVG nel pannello di input
Imposta il nome del componente e attiva le opzioni di incapsulamento
Clicca Converti per generare SVG compatibile con JSX
Copia il risultato nel file del componente React

Casi d'uso comuni

Convertire icone SVG da Figma o Illustrator in componenti React
Costruire una libreria di icone con componenti React SVG riutilizzabili
Migrare asset SVG da HTML statico a React
Ottimizzare SVG inline per il rendering React

Domande frequenti

Quali attributi SVG vengono convertiti?

Tutti gli attributi SVG in kebab-case vengono convertiti in camelCase: stroke-width → strokeWidth, fill-opacity → fillOpacity, ecc.

Si può incapsulare l'SVG come componente React?

Sì. Attiva l'opzione 'Incapsula come componente' per generare un componente React completo con export.

Perché rimuovere xmlns in React?

L'attributo xmlns è necessario solo per file SVG standalone. In JSX/React non serve.

Gestisce gli stili inline?

Sì. Le stringhe di stile inline vengono convertite in oggetti style JavaScript con proprietà in camelCase.