Convertitore da SVG a JSX

Cos'è Convertitore da SVG a JSX?

Il Convertitore da SVG a JSX è uno strumento gratuito nel browser che trasforma il semplice markup SVG in JSX di React valido, che puoi inserire direttamente in un componente. React si aspetta gli attributi del DOM in camelCase (strokeWidth, clipPath, fillRule), usa className al posto di class e richiede l'attributo style come oggetto di proprietà in camelCase invece che come stringa: questo strumento corregge tutto ciò automaticamente. Gli sviluppatori front-end e i designer lo usano quando esportano icone da Figma, Illustrator o un set di icone. Attiva la pulizia facoltativa per rimuovere commenti, metadati dell'editor e dichiarazioni XML, e scegli se l'output è JSX inline o un componente funzione, memo() o forwardRef tipizzato con React.SVGProps.

Come usare Convertitore da SVG a JSX

1. Incolla il tuo markup SVG nella casella di input, oppure trascina un file .svg nell'area di rilascio.
2. Leggi il JSX convertito nella casella di output: gli attributi sono in camelCase, class diventa className, uno style inline diventa un oggetto style e i tag vuoti si autochiudono.
3. Apri le Impostazioni e scegli un Output del componente: JSX inline, un componente funzione, un componente memo() o un componente forwardRef.
4. Imposta il campo Nome del componente per controllare il nome usato nel wrapper (ad esempio MyIcon).
5. Attiva Props TypeScript per tipizzare il componente con React.SVGProps, oppure attiva Pulisci SVG per rimuovere prima commenti e metadati dell'editor.
6. Fai clic su Copia per copiare il JSX, poi incollalo nel tuo progetto React o Next.js.

Esempi

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Domande frequenti

Cosa modifica il convertitore nel mio SVG?

Rinomina gli attributi con trattino e con namespace nella forma camelCase di React (stroke-width in strokeWidth, xlink:href in xlinkHref), converte class in className, riscrive una stringa style inline in un oggetto style JSX con chiavi in camelCase e autochiude gli elementi vuoti come path e rect affinché siano JSX valido.

Come funzionano le opzioni di output del componente?

Scegli JSX inline per posizionare il markup ovunque, oppure racchiudilo come componente funzione, memo() o forwardRef usando il Nome del componente che inserisci. Un componente forwardRef riceve una ref collegata all'svg radice. Attiva Props TypeScript per tipizzare qualsiasi wrapper con React.SVGProps ed espandere {...props}.

Converte gli stili inline?

Sì. Un attributo style="fill:red;stroke-width:2" viene riscritto in un oggetto style JSX come style={{ fill: "red", strokeWidth: "2" }}, con i nomi delle proprietà in camelCase e i valori come stringhe. Le proprietà CSS personalizzate (--var) vengono conservate come chiavi stringa.

Cosa fa la pulizia in stile SVGO?

Quando Pulisci SVG è attivo, lo strumento rimuove le dichiarazioni XML, il DOCTYPE, i commenti, <metadata>, i namespace dell'editor come inkscape: e sodipodi:, e l'attributo version dell'svg, poi comprime gli spazi bianchi, il tutto prima che venga eseguita la conversione in JSX.

Il mio SVG viene caricato da qualche parte?

No. Trascinare un file o incollare il markup esegue una pura trasformazione di stringa interamente nel tuo browser, quindi il tuo SVG non viene mai inviato a un server e lo strumento funziona offline.