Ogni sviluppatore che ha mai incollato un SVG grezzo in un progetto React conosce bene questi problemi.
Gli SVG grezzi usano attributi con trattino come clip-rule, fill-opacity e stroke-linecap. React richiede il camelCase: clipRule, fillOpacity, strokeLinecap. Dimenticare anche un solo attributo causa errori a runtime o bug di stile difficili da rintracciare.
Figma e Sketch esportano SVG con colori incorporati come fill="#3B82F6". Ogni icona diventa un componente monouso. Riutilizzarla in temi scuri, stati hover o colori brand diversi richiede clonare e modificare manualmente.
I tool di design aggiungono <title>, <defs>, gruppi <g> vuoti e attributi ridondanti a ogni SVG esportato. Questo codice inutile gonfia il bundle JSX e rallenta il tempo di parsing — particolarmente evidente con decine di icone inline.
Incolla SVG a sinistra, ottieni il componente React a destra
Sei conversioni di livello produzione, istantanee, tutte nel browser.
Incolla qualsiasi SVG e il componente React appare immediatamente. La conversione SVG in React viene eseguita come una trasformazione AST nel browser — nessun viaggio di rete, nessuna latenza, nessun limite di dimensione del file.
Attiva la modalità TSX e il convertitore aggiunge automaticamente interface IconProps extends React.SVGProps<SVGSVGElement> in cima al file. Ogni prop è completamente tipizzata — className, attributi personalizzati, senza cast forzati.
Prima della conversione SVG in React, lo strumento rimuove i <title>, <defs>, gruppi vuoti e attributi ridondanti esportati da Figma o Sketch, e unisce e semplifica i path — riducendo le dimensioni dell'output SVG in React fino al 60%.
Con la modalità Tailwind attiva, il convertitore SVG in React sostituisce i colori fill e stroke codificati con className="fill-current" e currentColor. Le icone ereditano immediatamente il colore del testo dall'elemento padre, funzionando perfettamente con qualsiasi tema.
Tutti gli attributi SVG con trattino — clip-rule, fill-opacity, stroke-linecap, xlink:href — vengono automaticamente rinominati nei loro equivalenti camelCase di React, e class diventa className. L'output SVG in React è sempre JSX valido.
Rimuovi con un clic il width e height codificati dall'elemento SVG radice. Il componente SVG in React si dimensionerà tramite CSS o la prop className, essendo completamente responsive e facile da controllare dal layout padre.
Dall'esportazione SVG grezza a un componente React pronto da incollare in meno di 30 secondi.
Copia il sorgente SVG da Figma, Sketch, una libreria di icone o un file SVG e incollalo nel pannello sinistro dello strumento SVG in React. Accetta qualsiasi SVG valido, incluse icone con più path e illustrazioni complesse.
Seleziona il formato di output e le ottimizzazioni in base ai requisiti del tuo progetto. Attiva TypeScript per output TSX con props tipizzate; attiva SVGO per pulire il rumore di Figma prima della conversione SVG in React; attiva Tailwind CSS per sostituire i colori codificati con currentColor.
Il pannello destro mostra l'output SVG in React in tempo reale mentre digiti. Clicca su Copia per inviare il componente React agli appunti e incollalo direttamente nel tuo file .jsx o .tsx — senza aggiustamenti di formattazione necessari.
Che tu stia costruendo un design system, ottimizzando le dimensioni del bundle o consegnando icone rifinite, il convertitore SVG in React si adatta al tuo workflow.
Incolla SVG grezzo a sinistra e il componente React appare a destra in tempo reale. La trasformazione SVG in React viene eseguita come un puro attraversamento AST nel browser — nessuna attesa, nessun server, nessun limite di velocità.
Passa l'output SVG in React da JSX a TSX con un clic e interface IconProps extends React.SVGProps<SVGSVGElement> viene generata automaticamente. Ogni classe CSS, label aria e handler di eventi è completamente tipizzato, pronto per progetti Next.js o Vite in modalità strict.
Il convertitore esegue la compressione SVGO prima della trasformazione SVG in React — rimuovendo i metadati di Figma, unendo path ridondanti, riducendo le dimensioni del file fino al 60%. La modalità Tailwind sostituisce i colori fill codificati con currentColor in modo che ogni icona si adatti a qualsiasi tema senza override CSS.
Domande comuni sulla conversione di SVG in componenti React, props TypeScript e ottimizzazione SVG.
SVG in React significa trasformare file SVG grezzi — esportati da Figma, Sketch o una libreria di icone — in componenti funzione React riutilizzabili. Il markup SVG diventa JSX, gli attributi con trattino diventano camelCase, e il componente accetta props come className, width e aria-label.
Rendere un SVG inline come componente React permette di controllare fill e stroke con CSS, animare singoli path con Framer Motion, aggiungere etichette ARIA per l'accessibilità e fare tree-shake delle icone non usate al momento della build. Il tag <img> tratta l'SVG come un'immagine opaca senza offrire nessuna di queste capacità.
Sì. Attiva il toggle TypeScript e l'output SVG in React passa dal formato .jsx a .tsx. Il convertitore genera automaticamente interface IconProps extends React.SVGProps<SVGSVGElement> in cima al file, con copertura completa dei tipi per ogni prop.
Lo strumento SVG in React gestisce tutti gli attributi con trattino noti: clip-rule → clipRule, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, stroke-width → strokeWidth, xlink:href → href, class → className. L'output è sempre JSX valido.
Prima della trasformazione SVG in React, lo strumento esegue un attraversamento JavaScript SVGO nel browser, rimuovendo i <title>, <desc>, <defs>, elementi <g> vuoti e attributi di presentazione ridondanti aggiunti dai tool di design, unendo e semplificando i path per produrre un componente React più leggero.
Con la modalità Tailwind attiva, il convertitore SVG in React sostituisce gli attributi fill="#hex" e stroke="#hex" codificati con fill="currentColor" e stroke="currentColor", e aggiunge className="fill-current" all'elemento <svg> radice. Le icone ereditano immediatamente le classi text-color del padre, rendendo fluidi il dark mode e il cambio di tema.
No. L'intera conversione SVG in React viene elaborata all'interno del motore JavaScript del browser. Il sorgente SVG non lascia mai il tuo dispositivo. Nessun backend, nessun caricamento, nessun log, nessun limite di velocità.
Sì, sebbene gli SVG molto grandi (centinaia di path) possano richiedere un po' più di tempo di elaborazione. Lo strumento SVG in React supporta icone con più path, clip path, gradienti, maschere e gruppi annidati. Per illustrazioni estremamente complesse, considera di suddividerle in componenti più piccoli per migliori prestazioni di rendering in React.
100% gratuito · Senza registrazione · Senza caricamenti · Supporto offline
