SVGView

Convertitore da SVG a React

Trasforma gli asset SVG in componenti React riutilizzabili per design system e app. Output pulito, pronto da incollare. Apri file SVG online e converti all'istante.

Trascina il tuo file SVG

oppure clicca per sfogliare o incolla il codice SVG

Accetta solo file .svg
Incolla il codice SVG con Ctrl+V / Cmd+V

Perché usare il nostro convertitore da SVG a React?

Output pronto per TypeScript

SVG to React genera TSX con props di base così puoi tipizzare le icone e usarle in sicurezza. Questo fa risparmiare tempo quando costruisci librerie UI riutilizzabili. Le props tipizzate aiutano anche strumenti e documentazione con autocomplete. In seguito puoi estendere le props con valori predefiniti per dimensione o colore.

Mappatura degli attributi JSX

SVG to React converte gli attributi SVG nei corrispettivi JSX come className, strokeWidth e fillOpacity. Questo evita avvisi a runtime e mantiene pulito il linting. Inoltre normalizza le maiuscole e minuscole degli attributi secondo le convenzioni React. Gli stili inline restano leggibili per rapide modifiche manuali.

Nome personalizzato del componente

SVG to React ti permette di scegliere un nome del componente in PascalCase oppure di generarne uno automaticamente dal nome del file. Una nomenclatura coerente mantiene ordinati gli import tra i progetti. Allinea i nomi ai tuoi design token per maggiore chiarezza. Anteporre Icon aiuta a raggruppare i set di icone negli IDE.

Output pulito e facile da copiare

Il convertitore fornisce codice con evidenziazione della sintassi e copia con un clic, così puoi incollarlo direttamente nei progetti React. Questo accelera l'handoff da design a sviluppo. Copiare un output ben formattato riduce il rumore di formattazione nelle review. L'output segue convenzioni comuni, quindi gli strumenti di lint raramente richiedono correzioni aggiuntive.

Locale e privato

La conversione avviene interamente nel browser senza upload. Icone private e asset dei clienti restano sul tuo dispositivo. L'elaborazione locale evita anche i ritardi di upload sui set più grandi.

Generazione immediata

SVG to React produce l'output in pochi secondi così puoi iterare rapidamente sui set di icone. La conversione veloce aiuta i team a stare al passo con le modifiche di design. È utile quando devi rigenerare decine di icone dopo un refresh del brand. I flussi batch diventano molto più semplici con un output coerente.

Come convertire SVG in React

1

Importa il tuo SVG

Trascina e rilascia un file, incolla il markup SVG oppure cerca la sorgente. SVG to React analizza l'SVG e prepara un output compatibile con JSX. SVG di input puliti producono componenti più puliti. Apri file SVG online e convertili subito.

2

Controlla il componente

SVG to React ti permette di impostare un nome per il componente e di ispezionare l'output JSX o TSX. Controlla attributi, viewBox e props prima di copiare. Puoi verificare rapidamente anche l'uso di currentColor per il supporto ai temi.

3

Copia e usa

Copia il componente e incollalo nel tuo codice. L'output di SVG to React è pronto per essere importato e usato subito. Conserva il componente in una cartella condivisa di icone per maggiore coerenza.

FAQ su SVG in React

Come faccio a convertire SVG in React online?
Usa SVG to React per caricare o incollare il tuo SVG, impostare un nome per il componente e copiare il JSX o TSX generato. L'output è pronto per l'importazione. Mantieni una struttura di cartelle coerente per le icone.
SVG to React supporta TypeScript?
Sì. SVG to React include un output compatibile con TypeScript così puoi usare componenti TSX senza boilerplate aggiuntivo. Questo riduce la tipizzazione manuale quando costruisci librerie di icone. Aiuta anche a mantenere coerenti le props delle icone tra i pacchetti.
Quali attributi SVG vengono convertiti per React?
SVG to React converte attributi comuni come className, strokeWidth, fillOpacity e clipPath. Questo mantiene il JSX valido e leggibile. Inoltre evita avvisi nella console di React.
Posso personalizzare il nome del componente?
Sì. SVG to React accetta qualsiasi nome valido in PascalCase, oppure può derivarlo dal nome del file per maggiore coerenza. Usa nomi chiari come IconSearch o LogoMark.
Il viewBox verrà preservato?
SVG to React mantiene il viewBox originale così la scalatura funziona come previsto nei layout React. Questo è importante per icone responsive. Evita anche ritagli quando cambiano le props di dimensione. Se l'SVG non ha un viewBox, aggiungilo prima della conversione.
Il mio SVG viene caricato su un server?
No. SVG to React funziona in locale nel browser, quindi i file non lasciano mai il tuo dispositivo. Questo mantiene sicuri gli asset dei clienti.
Posso usare l'output in Next.js?
Sì. L'output funziona in Next.js, Remix, Gatsby e altri framework React senza modifiche. Importalo come qualsiasi altro componente.
Il Convertitore da SVG a React è gratuito e utilizzabile senza download?
Sì. Il Convertitore da SVG a React è gratuito nel browser. Non sono richiesti download né installazione.
Serve un account per usare il Convertitore da SVG a React?
No. Il Convertitore da SVG a React funziona subito nel browser senza registrazione e i file restano in locale.

Strumenti SVG correlati

Abbina SVG to React a questi strumenti per visualizzare in anteprima, ottimizzare o esportare per altre piattaforme.

SVG Viewer

Controlla viewBox e dimensioni prima della conversione con SVG to React.

Apri strumento

SVG Optimizer

Comprimi gli SVG prima di SVG to React così i componenti restano leggeri.

Apri strumento

SVG Path Extractor

Estrai dati di tracciato precisi prima della conversione quando ti servono animazioni o modifiche ai tratti.

Apri strumento

SVG to React Native

Genera componenti mobile quando ti serve un output react-native-svg.

Apri strumento

SVG to PNG

Esporta PNG per documentazione o anteprime rapide.

Apri strumento

Blog SVG correlato

Scopri altri contenuti pratici su flussi SVG, risoluzione dei problemi e produzione.