Cosa fa il convertitore SVG in componente?

Trasforma un SVG grezzo in un componente riutilizzabile React (JSX/TSX) o Vue 3. Oltre a incapsulare l'SVG nel componente, pulisce il codice e adatta gli attributi al formato corretto di ciascun framework.

Come funziona la conversione in React?

In React, gli attributi vengono convertiti in camelCase (ad esempio, stroke-width diventa strokeWidth), class diventa className e lo style testuale diventa un oggetto. L'SVG viene incapsulato in un componente funzionale che inoltra le props all'elemento svg — ideale per i sistemi di icone.

E la conversione in Vue 3?

In Vue 3, l'SVG viene inserito in un blocco template all'interno di un Single File Component con script setup (lang ts). Gli attributi restano in formato HTML (kebab-case) e il componente inoltra automaticamente gli attributi all'elemento radice.

A cosa serve l'opzione currentColor?

Sostituisce i colori fissi di fill e stroke con currentColor, facendo ereditare all'icona il colore del testo (la proprietà CSS color). È essenziale nei sistemi di icone perché permette di ricolorare l'icona semplicemente cambiando il colore dell'elemento padre.

Il componente generato supporta TypeScript?

Sì. Scegli React (TSX) per generare un componente tipizzato con SVGProps, oppure Vue 3, che usa script setup (lang ts). Entrambi funzionano nei progetti TypeScript senza modifiche.

Il mio SVG viene inviato a qualche server?

No. Tutta la conversione avviene localmente nel tuo browser tramite JavaScript. Nessun SVG o codice viene inviato ai server di ToolboxHub.

Convertitore SVG in Componente React e Vue Online Gratis

Informazioni sul Convertitore SVG in Componente

Incolla un SVG grezzo e ottieni un componente pronto in React (JSX o TSX) o Vue 3. Lo strumento pulisce il codice, converte gli attributi nel formato di ciascun framework (camelCase e className in JSX), può sostituire i colori con currentColor e rimuovere le dimensioni così l'icona si adatta via CSS. Ideale per creare sistemi di icone interni. Tutto avviene localmente nel tuo browser. Per ridurre la dimensione del codice, usa il nostro Minificatore.

Come convertire in 3 passi

1Incolla il codice SVG nel campo di input.
2Scegli il framework (React JSX/TSX o Vue 3) e il nome del componente.
3Copia o scarica il componente, generato all'istante mentre modifichi.

Convertitore SVG in Componente

Componente generato

Informazioni sul Convertitore SVG in Componente

Come convertire in 3 passi

Domande frequenti