SVG Forge

SVG in componente React

Incolla un SVG e ottieni un componente JSX o TSX pronto da importare.

oppure trascina un file / incolla il codice qui sotto
Componente React
L'output compare qui

Come funziona

  1. 1Incolla codice SVG o trascina un file .svg.
  2. 2Attiva l'output TypeScript e imposta il nome del componente.
  3. 3Copia il componente generato nel tuo codice.

Gratis, senza registrazione e senza filigrana: tutto gira localmente nel tuo browser, quindi i tuoi file non lasciano mai il computer.

Domande frequenti

Cosa viene convertito esattamente?

Gli attributi passano a camelCase (stroke-width → strokeWidth), class diventa className e le altre prop vengono propagate alla radice, così puoi passare dimensione e colore.

Devo ottimizzare prima l'SVG?

Sì: passalo prima nell'ottimizzatore SVG per un componente più piccolo e pulito. I due strumenti distano un clic.

Strumenti correlati

SVG in Vue

Trasforma qualsiasi SVG in un componente a file singolo di Vue 3.

Ottimizzatore SVG

Pulizia firmata SVGO: file più leggeri, stessi pixel. Il risparmio si vede subito.

SVG in data URI

Codifica l'SVG per img src, url() nel CSS o ovunque ci stia un URI.