⚛️ Convertitore SVG in React JSX

Incolla il markup SVG per convertirlo in JSX da inserire direttamente in un componente React. Converte gli attributi in camelCase (class→className), trasforma la stringa style in un oggetto e rimuove commenti e DOCTYPE.

Input SVG

Output React JSX

Altri strumenti per sviluppatori

🎨 Compilatore LESS in CSS 🖼️ Convertitore immagini Base64 🔠 Convertitore di maiuscole/minuscole

GUIDA

Scopri di piu

1. Perché convertire SVG in JSX

La sintassi di React (JSX) differisce leggermente da HTML/SVG. Gli attributi con trattini (stroke-width) devono diventare camelCase (strokeWidth), class diventa className e style deve essere un oggetto JavaScript invece di una stringa. Questo strumento converte automaticamente queste differenze, così un'icona SVG esportata da un designer può essere incollata direttamente in un componente React.

2. Regole di conversione

Mappa class→className e for→htmlFor, converte in camelCase gli attributi con trattini come stroke-width e fill-opacity, trasforma gli attributi con namespace come xlink:href in xlinkHref e lascia invariati gli attributi data-/aria-. style="fill:red;stroke-linecap:round" diventa l'oggetto style={{ fill: 'red', strokeLinecap: 'round' }}, mentre commenti, DOCTYPE e la dichiarazione XML vengono rimossi.

3. Conversione sicura basata su DOMParser

Invece di usare regex, questo strumento analizza davvero l'SVG con il DOMParser integrato nel browser e lo serializza di nuovo, così struttura annidata e attributi vengono gestiti correttamente. Tutto viene eseguito nel tuo browser e il codice non viene mai inviato a un server. Dopo aver incollato il risultato in un componente, rifiniscilo secondo le tue esigenze, ad esempio spostando width/height nelle props o impostando fill su "currentColor".

Domande frequenti

Posso usare direttamente l'output in React?

Sì. Incolla il JSX all'interno del return del tuo componente. Se vuoi, puoi spostare dimensioni e colore nelle props per renderlo più riutilizzabile.

Viene convertita anche la stringa style?

Sì. Una stringa come style="a:b;c:d" diventa l'oggetto style={{ a: 'b', c: 'd' }} con i nomi delle proprietà CSS in camelCase.

Il mio SVG viene inviato a un server?

No. La conversione avviene interamente nel tuo browser e il codice non viene mai inviato a un server.

Usa una libreria come svgr?

No. È implementato direttamente con il DOMParser integrato nel browser, senza librerie esterne.