Convertire SVG in componente React

No. La conversione avviene interamente nel tuo browser. Il file non lascia mai il tuo dispositivo – non c'è alcun server che possa vederlo. Una volta caricata la pagina, lo strumento funziona persino offline.

Salva il file accanto al tuo codice e importalo: import MyIcon from "./MyIcon"; Tutto ciò che passi al componente va all'elemento <svg>, quindi <MyIcon className="h-6 w-6" aria-hidden="true" /> funziona come previsto. Il componente prende il nome dal file, in PascalCase.

Gli attributi vengono rinominati nella forma JSX (stroke-width → strokeWidth, class → className, xlink:href → xlinkHref), gli stili inline diventano oggetti style, e prologo XML, commenti e DOCTYPE vengono eliminati. A meno che tu non disattivi «Ottimizza prima», l'SVG passa anche dallo stesso ottimizzatore di «Ottimizzare un SVG», che accorcia sensibilmente il codice.

Script, gestori di eventi, immagini e fogli di stile esterni vengono rimossi prima di generare il componente – non distribuirai mai codice estraneo per sbaglio.

Per impostazione predefinita ottieni un file .tsx con props tipizzate come SVGProps<SVGSVGElement>. Disattiva «TypeScript» per un semplice file .jsx senza tipi.