svg2all

Convertire SVG in componente Vue

Trasforma un SVG in un componente Vue pronto da importare – nel browser, senza caricamento.

Funziona nel tuo browser – il file non viene caricato

Caricamento dello strumento …

Domande frequenti

Il mio file viene caricato?

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.

Come uso il componente?

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

Cosa viene modificato nell'SVG?

Il markup resta SVG puro in un <template>; vengono rimossi solo prologo XML, commenti e DOCTYPE. Gli attributi impostati sul componente passano all'elemento radice tramite v-bind="$attrs". A meno che tu non disattivi «Ottimizza prima», l'SVG passa anche dallo stesso ottimizzatore di «Ottimizzare un SVG», che accorcia sensibilmente il codice.

E gli script e i riferimenti esterni?

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

Strumenti correlati