Semplifica il tuo flusso di lavoro: cerca miniwebtool.
Aggiungi
Pagina Iniziale > Strumenti per webmaster > Convertitore da SVG a React/JSX
 

Convertitore da SVG a React/JSX

Converti i file SVG incollati o caricati in componenti JSX di React puliti con attributi in camelCase, prop TypeScript opzionali, forwardRef, React.memo, accessibilità del titolo, conversione dell'oggetto stile e output sanificato.

Convertitore da SVG a React/JSX
Esempi
Pronto
Incolla un elemento <svg> completo. Il server accetta fino a 220000 caratteri.
Il caricamento di un file popola l'editor per l'anteprima, poi il file caricato verrà utilizzato per la conversione.
Input <svg>
Normalizza camelCase
React {...props}
Output Componente
Elementi 0
Attributi 0
ViewBox -
Usa il formato PascalCase, ad esempio AlertIcon, BrandMark o LogoGlyph.
Impostazioni di output

Embed Convertitore da SVG a React/JSX Widget

Convertitore da SVG a React/JSX

Il Convertitore da SVG a React JSX trasforma i file SVG grezzi in componenti React riutilizzabili. È pensato per gli sviluppatori che hanno bisogno di componenti icona più puliti, loghi aziendali, illustrazioni di prodotti e risorse per design system senza dover correggere manualmente ogni attributo SVG. Incolla il markup SVG o carica un file .svg in formato UTF-8, scegli le opzioni React di cui hai bisogno, quindi copia il componente generato nel tuo progetto.

Come si usa

  1. Incolla o carica l'SVG. Incolla un file SVG completo nell'editor o carica un file .svg in formato UTF-8.
  2. Assegna un nome al componente. Inserisci un nome per il componente React in PascalCase, come AlertIcon o BrandMark.
  3. Scegli le opzioni di React. Seleziona le opzioni per TypeScript, forwardRef, React.memo, accessibilità del titolo, conversione dello stile, sanitizzazione e propagazione delle prop.
  4. Converti in JSX. Fai clic su Converti in componente React per generare codice JSX pronto per il copia-incolla.
  5. Controlla e copia. Controlla il riepilogo della conversione, gli avvisi e il codice generato prima di copiarlo nel tuo progetto React.

Cosa gestisce il convertitore

Pulizia degli attributi ReactI comuni attributi SVG come stroke-width, fill-rule e clip-path vengono riscritti come strokeWidth, fillRule e clipPath.
Ergonomia del componenteLe opzioni {...props}, forwardRef, React.memo, esportazione predefinita, esportazione con nome e prop TypeScript rendono l'output più facile da inserire in una codebase React.
Controllo dell'output più sicuroLa sanitizzazione rimuove i tag script, i gestori di eventi in linea e i collegamenti javascript: per impostazione predefinita, rendendo il JSX generato più sicuro da ispezionare prima dell'uso.

Consigli per componenti SVG React migliori

Mantieni la viewBox originale ogni volta che è possibile, perché controlla il modo in cui l'SVG si ridimensiona. Per i sistemi di icone, l'uso di width="1em" e height="1em" consente all'icona di ereditare la dimensione del testo, permettendo comunque a chi la richiama di sovrascrivere le dimensioni tramite le prop. Usa un nome di componente in PascalCase descrittivo, mantieni gli SVG decorativi accessibili con aria-hidden quando opportuno e usa la prop title per le icone significative che comunicano informazioni.

FAQ

Cosa modifica questo convertitore da SVG a React?

Analizza l'XML dell'SVG e riscrive gli attributi SVG in JSX compatibile con React, inclusi className, attributi SVG in camelCase, oggetti di stile opzionali, prop, forwardRef, accessibilità del titolo e sintassi di esportazione.

Posso caricare un file SVG?

Sì. Puoi caricare un file .svg in formato UTF-8 o incollare il markup SVG. I file caricati vengono letti come testo e convertiti in JSX sul server.

Sanitizza il codice SVG?

La sanitizzazione è abilitata per impostazione predefinita. Il convertitore rimuove i tag script, i gestori di eventi in linea e i collegamenti javascript: in modo che il componente generato sia più sicuro da controllare prima dell'uso.

Perché convertire gli attributi di stile in oggetti?

React si aspetta che la prop style sia un oggetto quando si scrive in JSX. La conversione delle stringhe di stile in oggetti consente una compilazione pulita dell'output e mantiene i nomi delle proprietà CSS in camelCase.

Qual è il formato migliore per il nome del componente?

Usa il formato PascalCase come AlertIcon o BrandMark. Il convertitore rimuove i caratteri non validi e garantisce che il risultato inizi con un identificatore di componente React valido.

Cita questo contenuto, pagina o strumento come:

"Convertitore da SVG a React/JSX" su https://MiniWebtool.com/it/convertitore-da-svg-a-react-jsx/ di MiniWebtool, https://MiniWebtool.com/

dal team miniwebtool. Aggiornato: 2026-05-22

Altri strumenti correlati:

Abbellitore CSSNuovo
Compressore CSS Online
Laboratorio CSS FlexboxNuovo
Generatore di CSS GridNuovo
Codificatore/Decodificatore di Entità HTML
Convertitore da Immagine ad Arte ASCIINuovo
Convertitore Immagine in Base64Nuovo
Tracciatore da Immagine a SVGNuovo
Minificatore/Abbellitore JavaScriptNuovo
Formattatore e Validatore JSONNuovo

Strumenti per webmaster:

Strumenti in primo piano:

Calcolatore dei numeri degli angeliCalcolatrice di Compatibilità Amorosa📅 Calcolatore di DataCalcolatore Segno Solare, Lunare e Ascendente 🌞🌙✨Calcolatore di SommeConvertitore da esadecimale a decimaleCalcolatore di Compatibilità dei Segni LunariConvertitore di Piedi e Pollici in CentimetriEstrattore di Immagini da VideoCalcolatore EsadecimaleGeneratore di parole casuali in ingleseCalcolatore del Giorno dell'Anno - Che giorno dell'anno è oggi?Calcolatore del numero di percorso di vitaRimuovi spaziGeneratore di CrucipuzzleFormattatore di TestoCalcolatore dei VotiConvertitore di Tempo in DecimaliCalcolatrice di NumerologiaQual è il mio numero fortunato?Calcolatore di ScalaCalcolatore BinarioPalla Magica 8Generatore casuale di animaliCalcolatore del Numero del NomeConvertitore da Decimale a TempoConvertitore da decimale a esadecimaleconvertitore da ppm a percentualeInverti TestoGeneratore di Superpotere CasualeConvertitore di Percentuale in PPMGeneratore di Colori CasualiSelettore di Film CasualeCalcolatore del percentile di altezzaGeneratore di Date CasualiDivisore di ImmaginiCalcolatore del Numero dell'AnimaCalcolatore del Segno LunareCalcolatore xG (Expected Goals) nel CalcioCalcolatore di Durata del Temporicerca-indirizzo-MACRicerca ID Utente InstagramCalcolatore del calcio correttoCalcolatore del Test Chi-QuadratoCalendario del Giorno dell'AnnoConvertitore in numeri romaniCalcolatore della Media Geometrica⏱️ Calcolatore di OreCalcolatore per ridurre frazioniGeneratore di Citazioni CasualiGeneratore di Unisci i PuntiniConvertitore da cm a piedi e polliciGeneratore di Gruppi CasualiCalcolatore di ArrotondamentoGeneratore di stringhe casualiStrumento Cifrario di CesareGeneratore di Carte da Gioco CasualeRicerca ID Utente FacebookCalcolatore da frazione a decimaleGeneratore di Obbligo o Verità AleatorioCalcolatore del SonnoCalcolatore di Differenza di ListeDivisore AudioCalcolatore del deficit caloricoCalcolatore Dimensioni di Stampa e Risoluzione (DPI/PPI)Selettore di Nome CasualeConvertitore da Esadecimale a BinarioConvertitore di Frazione in PercentualeGeneratore di Modello Cono Sviluppatogeneratore-di-testo-capovoltoCalcolatore di calcestruzzoCreatore di CruciverbaCalcolatore della Circonferenza di un EllisseGeneratore di Personaggi RPG CasualeCalcolatore dell'Aspettativa di VitaGeneratore di oggetti casualiCompressore VideoOrdina NumeriValidatore XMLGeneratore di LabirintiUnisci VideoConvertitore da binario a esadecimaleGeneratore di anagrammiGeneratore di Orario CasualeCalcolatore del Coefficiente di VariazioneAnalizzatore Avanzato di Compatibilità ZodiacaleCalcolatore del Segno di VenereCalcolatore Ore di LavoroEstrattore AudioLista di Anni BisestiliCalcolatore di ModuloGeneratore di Tabelloni Torneo CasualiCalcolatore di radice quadrataCalcolatore dell'ArcotangenteCalcolatore di etàContatore di lineaCalcolatore del Numero del DestinoCalcolatore di Log in Base 10Calcolatore Ritmo NuotoCalcolatrice della Deviazione Standard RelativaVerificatore di Nome Utente sui Social MediaConvertitore da DMS a Gradi DecimaliCalcolatore Quanto Manca AlCalcolatore del Numero MaestroConvertitore di AngoliConvertitore HTML in TestoConvertitore FPSCalcolatore della Congettura di CollatzCalcolatore di Voti PonderatiCalcolatore della deviazione standard - Alta precisioneCalcolatore di Conversione Scala ModelloGeneratore di Crittogramma🔊 Generatore di ToniCalcolatore dell'Area di un EllisseCalcolatore della TangenteConvertitore da indirizzo IP a binarioConvertitore EsadecimaleCalcolatore di Velocità di CiclismoCalcolatore EBITDACalcolatore di Area del Poligono IrregolareCalcolatore di Inflazione USCalcolatrice del FattorialeCalcolatrice di Numeri ComplessiConvertitore di pollici in cmConta il numero di caratteriMiglioratore di ImmaginiCalcolatore dell'Errore PercentualeCalcolatore Passi in DistanzaConvertitore da Ottale a DecimaleCalcolatore di FIPCalcolatore di Pendenza e GradoCalcolatore del Giorno della SettimanaCalcolatore di CartongessoContatore di SillabeCalcolatore del Partitore di TensioneConvertitore da Decimale a OttaleCalcolatore di Log in Base 2Calcolatore di ProfittoCalcolatore Sottorete IPGeneratore di Compleanni CasualiGeneratore di Hash SHA256Randomizzatore di listaCalcolatore di log naturalePrimi n Numeri di Pi GrecoAnalizzatore di Indirizzi MACCalcolatore Unità Alcoliche StandardGeneratore di Carte di Credito CasualeCalcolatore del Numero della PersonalitàCalcolatrice del giorno della settimana di nascitaCalendario di luna nuova e luna pienaGeneratore di Haiku CasualeCalcolatore della MediaCalcolatore di Pendenza del TettoConvertitore da Gradi Decimali a DMSStatistiche del Canale YouTubeCalcolatore della Distanza di VoloCalcolatore della distanza tra due puntiConvertitore CMYK in esadecimaleGeneratore di Parole MescolateGeneratore di Coordinate CasualiCalcolatrice del Numero d'EspressioneCalcolatore delle frazioni equivalentiLanciatore di DadiCalcolatore di VelocitàConvertitore da notazione scientifica a decimaleGeneratore di Accordi CasualiGeneratore di Lettera CasualeGeneratore di Testo Piccolo ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾Rimuovi interruzioni di rigaSegnapunti TennisCalcolatore del rettangoloCalcolatore Proporzioni RicetteConvertitore da indirizzo IP a esadecimaleGeneratore di Frattali L-SystemInverti VideoRimuovi linee vuote da un testoCalcolatore Coefficiente di CorrelazioneCalcolatore del valore attualeCalcolatore di diminuzione di percentualeConvertitore da Lbs a KgCalcolatore di notazioni scientificheConvertitore BinarioGeneratore di numeri della lotteriaCalcolatore di Guadagni TwitchCalcolatore Media, Mediana e Modacalcolatore-hba1cCalcolatrice ScientificaConfronta due stringheContatore di Token AIConvertitore PSI in BarGeneratore di Indirizzi IP CasualiSimulatore di Crittografia RSA Passo dopo PassoStrumento online per rimuovere la punteggiaturacalcolatore-di-esponenti-alta-precisioneCalcolatore di piastrelleConvertitore da binario a ottaleConvertitore di Frequenza e Lunghezza d'OndaConvertitore Taglie di AbbigliamentoGraficatore di FunzioniRuota VideoCalcolatore Bordo per TrapunteCalcolatore di Filo per Punto CroceCalcolatore di Schemi a MagliaConvertitore di Misure dei Ferri da MagliaConvertitore di Misure UncinettoCalcolatore di Fieno per CavalliRicerca Misura del Trasportino da Viaggio per AnimaliCalcolatore UVB per Habitat di RettiliCalcolatore Dimensioni Gabbia per UccelliCalcolatore di Watt del Riscaldatore per AcquarioCalcolatore Lettiere per GattiCalcolatore della Portata del Fascio dei FariCalcolatore del Rapporto di Compressione del MotoreCalcolatore del Consumo del BattistradaCalcolatore del Peso sul Timone del RimorchioCalcolatore di Distribuzione del Peso del VeicoloDivisore Costi di ViaggioCalcolatore della Distanza di ArrestoCalcolatore Indennizzo per i LavoratoriCalcolatore di Distribuzione dei Beni TestamentariCercatore di Classe di MarchioCalcolatore delle Tasse di Deposito del BrevettoVerificatore di Nexus dell'Imposta sulle VenditeCalcolatore di Riduzione della PenaCalcolatore di PrescrizioneOttimizzatore di Prezzi AirbnbDivisore Affitto tra CoinquiliniCalcolatore Affitto Sezione 8Calcolatore del Metodo BRRRRCalcolatore del Rendimento Cash-on-CashCalcolatore di Rendimento da AffittoCalcolatore Scambio 1031Visualizzatore di Crescita del PatrimonioCalcolatore del Costo del PranzoCalcolatore di Costo Palestra vs Allenamento a CasaCalcolatore del Costo dell’Abitudine al CaffèCalcolatore di Risparmio del Lavoro da RemotoCalcolatore ROI Attività SecondariaTracker dei Costi degli AbbonamentiCalcolatore Prezzi SaaSCalcolatore Prezzo Progetti FreelanceGuida agli Abbinamenti dei Legni da AffumicaturaCalcolatore Tempo di FermentazioneCalcolatore Tempo di MarinaturaFiltro Ricette per Restrizioni AlimentariTrova Sostituti delle SpezieTracker dell'Emivita della CaffeinaSuggeritore di Abbinamento ViniConvertitore di Gradi di ArrampicataCalcolatore del Rapporto del Cambio della BiciclettaCalcolatore della Resistenza dei Nodi da PescaTimer per le Posizioni YogaCalcolatore SWOLF NuotoPredittore del Tempo di GaraCalcolatore di Potenza del Pugno nel BoxeCalcolatore Punti RugbyCalcolatore Run Rate CricketCalcolatore del Punteggio di Wells (TVP/EP)Calcolatore della Scala del Coma di GlasgowCalcolatore del Punteggio APGARCalcolatore FFMICalcolatore della Corsa di 12 Minuti di CooperCalcolatore del Test del Cammino di un Miglio RockportCalcolatore da Massa Magra a ForzaCalcolatore del Rapporto Carboidrati-InsulinaCalcolatore del Fattore di Sensibilità InsulinicaConvertitore Calendario EbraicoConvertitore Calendario HijriConvertitore di Calendario LunareCalcolatore Età nelle CultureCalcolatore Quanto Tempo FaGeneratore di schemi di dateCalcolatore di Data IntermediaAggiungi Giorni Lavorativi a una DataCalcolatore Giorni LavorativiAnalizzatore di Frequenza delle ParoleAnalizzatore di Varianza di Lunghezza FrasiEditor di Leggibilità Stile HemingwayConvertitore di Pronuncia IPAStrumento Cifrario di VigenèreStrumento Cifrario AtbashCodificatore e Decodificatore ROT13Visualizzatore e Rimuovi Dati EXIFTraduttore Pig LatinGeneratore di BackronimiGeneratore di AcronimiVerificatore di PangrammiVerificatore di LipogrammaTracciatore da Immagine a SVGConvertitore da Immagine ad Arte ASCIIGeneratore di Schema JSONPlayground TypeScriptCompilatore Less in CSSCompilatore SCSS in CSSConvertitore da SVG a React/JSXGeneratore di Stringhe di QueryParser URLValidatore e decodificatore UUIDRiferimento codici di stato HTTPGeneratore di Comandi cURLGeneratore del Triangolo di SierpinskiPlotter di Superficie 3DTracciatore di Equazioni PolariGeneratore di Insieme di JuliaEsploratore dell'Insieme di MandelbrotGeneratore di Triangolazione di DelaunayGeneratore di Diagrammi di VoronoiGeneratore di SpirografoGeneratore di TassellatureCalcolatore di Capacità di Processo Sei SigmaGeneratore di Diagrammi di ParetoCalcolatore NPS (Net Promoter Score)Calcolatore della fidelizzazione per coorteCalcolatore Tasso di AbbandonoCalcolatore del Costo di Acquisizione Cliente (CAC)Calcolatore del Valore del Ciclo di Vita del Cliente (CLV)Calcolatore del Tasso di ConversioneCalcolatore Dimensione Campione Test A/BCalcolatore di Significatività Test A/BCalcolatore dell'Equazione delle LentiCalcolatore di Campo Magnetico di un FiloCalcolatore di Campo ElettricoCalcolatore della Legge di CoulombCalcolatore della Legge di SnellCalcolatore del Momento d'InerziaCalcolatore di Velocità AngolareCalcolatore di forza centripetaCalcolatore del Periodo del PendoloCalcolatore Costante ElasticaCalcolatore Effetto DopplerCalcolatore Indice di SortinoCalcolatore Indice di TreynorCalcolatore Beta di AzioniCalcolatore di Titoli del Tesoro Protetti dall’Inflazione (TIPS)Calcolatore di Ricalcolo MutuoCalcolatore Tasso ForwardCalcolatore della Duration Obbligazionaria (Macaulay e Modificata)Calcolatore di Convessità delle ObbligazioniCalcolatore di Rendita Indicizzata FissaCalcolatore di Rendita VariabileCalcolatore di Mutuo InversoCalcolatore di Pagamento RenditaSimulatore Soroban Abaco GiapponeseMoltiplicazione del Contadino RussoCalcolatore di Trucchi di Matematica VedicaCalcolatore di Moltiplicazione EgiziaRisolutore Matematico con Numeri RomaniAllenatore di Calcolo MentaleQuiz delle TabellineVisualizzatore di Riporto e PrestitoGeneratore di Decomposizioni NumericheRisolutore di Problemi di MoneteCalcolatore del Triangolo Distanza-Velocità-TempoRisolutore Problemi Tasso di LavoroRisolutore Problemi di MiscelaRisolutore Problemi di EtàRisolutore Problemi Incontro TreniCalcolatore di IdratazioneCalcolatore di Passo in CalorieCalcolatore Dosaggio FarmacoCalcolatore Calorie AlcolCalcolatore di Ricomposizione CorporeaGeneratore di Argomenti di Dibattito CasualiGeneratore di Nomi Casuali per Gatti e CaniGeneratore di Versetti Biblici CasualiGeneratore di Problemi di Matematica CasualiGeneratore di Paragrafi CasualiGeneratore di Frasi Casuali in IngleseCalcolatore di Ghiaia, Sabbia e TerriccioCalcolatore di Peso AcciaioCalcolatore di Coppia di Serraggio BulloniCalcolatore di Flusso nelle TubazioniCalcolatore di Carico della TraveConvertitore Dollaro OroCalcolatore di Probabilità delle OpzioniCalcolatore di Frazionamento AzioniCalcolatore ESPPCalcolatore di Penale per Ritardo nel PagamentoCalcolatore Tariffa Oraria per FreelanceCalcolatore Leasing vs AcquistoDivisore di Mancia AvanzatoGeneratore di Lista BagagliCalcolatore Jet LagCalcolatore del Budget di ViaggioCalcolatore della Perdita di CaloreCalcolatore del Costo di Generazione ElettricaCalcolatore del Consumo di AcquaCalcolatore del Costo Energetico degli ElettrodomesticiCalcolatore di Audit Energetico DomesticoCalcolatore ROI SolareCalcolatore per Pannelli SolariCalcolatore del Compost (Rapporto C:N)Calcolatore Fertilizzante per PratoCalcolatore Date di GeloCalcolatore Terriccio per Orto RialzatoCalcolatore Fertilizzante NPKCalcolatore del Tasso di Germinazione dei SemiCalcolatore di Bitrate VideoTraspositore di Tonalità MusicaleCalcolatore BPM a ToccoStimatore Dimensioni File FotoCalcolatore da Megapixel a Dimensione di StampaCalcolatore del Fattore di CropCalcolatore del Triangolo di EsposizioneCalcolatore della Capacità di Traino del VeicoloCalcolatore Leasing AutoCalcolatore 0–60 e Quarto di MiglioCalcolatore Tempo di Ricarica EVCalcolatore Autonomia EVCalcolatore Distanza 3DCalcolatore del ToroCalcolatore del Tronco di ConoCalcolatore di Poligono RegolareIdentificatore di Sezione ConicaCalcolatore di IperboleCalcolatore di Divisione LungaContatore Caratteri Twitter/XSelettore di Commenti YouTubeEstrattore di tag YouTubeScaricatore di Miniature YouTubeCalcolatore Guadagni YouTube