Vai al contenuto principale

SVG in React

Converti SVG in React, JSX o TSX

Trasforma i file SVG nel markup JSX, un componente React pronto per l'importazione in TypeScript o JavaScript o un modulo che esporta SVG come stringa. Il convertitore corregge gli attributi JSX, converte gli stili in linea, preserva viewBox e supporta i download batch.

Trascina i file qui

Modifica dei valori predefiniti per i nuovi file

Output

Un modulo completo: gli import, il componente e l'export.

Modulo

Dà il nome al componente, alla costante esportata e al file generato. Per impostazione predefinita usa il nome del file in PascalCase.

Linguaggio

Avvolge il componente perché un ref raggiunga l'elemento svg.

Applica React.SVGProps<SVGSVGElement> all'elemento svg radice, dopo gli attributi presi dal file.

Export
Ottimizzazione

Esegue il preset di ottimizzazione sicuro prima di generare l'output.

Elimina larghezza e altezza sull'elemento radice, così il componente si dimensiona dal CSS o dalle props che passi. Il viewBox viene sempre mantenuto.

Stile

Sostituisce ogni riempimento e contorno che indica un colore, così il disegno eredita la proprietà CSS color. fill="none" resta intatto.

Anteprima

Nessuna anteprima. Aggiungi e seleziona file per vedere i risultati.

Nessun file ancora. Trascina file sopra o clicca SELEZIONA FILE.

Che cos'è SVG?

SVG (Scalable Vector Graphics) è un formato di immagine vettoriale basato su XML. Anziché pixel, un SVG descrive matematicamente forme, tracciati, riempimenti e contorni, così da poter essere reso a qualsiasi dimensione senza perdere qualità.

SVG è il formato vettoriale standard per il Web. È supportato nativamente da tutti i browser moderni e può essere formattato con CSS o animato con JavaScript o SMIL. Spesso è compatto per loghi, icone e illustrazioni, ma i file SVG complessi possono diventare grandi.

Quando convertire SVG in React

I bundler non sono d'accordo su cosa restituisca l'import di un file .svg: markup inline, un URL o niente del tutto senza il loader giusto. Un componente versionato insieme al resto del codice aggira il problema. L'icona diventa normale JSX: i tipi si controllano, il tree shaking la elimina se non serve e accetta props come qualsiasi altro componente. La conversione si occupa anche di ciò che JSX richiede e l'SVG grezzo non ha: stroke-width diventa strokeWidth, class diventa className, xlink:href diventa xlinkHref e una stringa di stile inline diventa un oggetto. Attiva l'opzione Usa currentColor e ogni riempimento e contorno eredita la proprietà CSS color, così un solo componente copre tutti i colori con cui lo usi.

Come convertire SVG in React online

  1. 1

    Trascina i tuoi file SVG, o clicca SELEZIONA FILE, per aggiungerli alla coda. Fino a 40 alla volta.

  2. 2

    Scegli JSX, React Component o SVG String, poi imposta il nome del componente, il linguaggio e se usare currentColor. Il codice generato si aggiorna mentre modifichi le opzioni.

  3. 3

    Copia il codice dall'anteprima, o clicca SALVA TUTTO per scaricare un file per ogni SVG, in un unico ZIP quando la coda contiene più di un file.

Privacy: i tuoi file non escono dal browser

La conversione viene eseguita localmente nel tuo browser utilizzando JavaScript e WebAssembly. Non è previsto il caricamento di file o la conversione lato server, quindi i file che aggiungi rimangono sul tuo dispositivo.

L'elaborazione locale aiuta a proteggere i loghi riservati, i documenti interni e le opere d'arte inedite dei clienti. Le pagine e il codice di conversione vengono memorizzati nella cache mentre li utilizzi, quindi gli strumenti che hai già aperto possono continuare a funzionare senza una connessione di rete.

Domande frequenti

Qual è la differenza tra i tre output?

JSX ti dà il markup svg nudo e crudo da incollare dentro un componente che hai già. React Component ti dà un modulo completo, import ed export inclusi, pronto da salvare come HomeIcon.tsx o HomeIcon.jsx. SVG String (TypeScript) è un modulo .ts che esporta il markup come semplice stringa, da iniettare nell'HTML, nei template delle email o in qualsiasi cosa non sia React.

Il componente accetta props come className e onClick?

Sì, finché Spread delle props è attivo. Il componente accetta React.SVGProps<SVGSVGElement> e lo applica all'elemento svg radice dopo gli attributi presi dal file, quindi className, style, onClick, width e aria-label valgono tutti e sovrascrivono quanto indicato nel file. Attiva anche forwardRef e un ref raggiunge l'elemento svg stesso.

Che cosa cambia Usa currentColor?

Ogni riempimento e contorno che indica un colore viene sostituito con currentColor, così il disegno viene dipinto con il valore a cui si risolve la proprietà CSS color e passare color="red" al componente funziona. fill="none" resta intatto e continua a significare "non dipingere". È disattivato per impostazione predefinita, perché un'illustrazione multicolore si appiattisce su un solo colore quando lo attivi.