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

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.