Vai al contenuto
Numio

Converti facilmente i file SVG in JSX — Numio

Trasforma il markup SVG in un componente della funzione React: SVGO ottimizza SVG nel tuo browser, quindi SVGR lo converte localmente nel tuo browser. Gli attributi sono camelCased (larghezza del tratto fino a strokeWidth), le dimensioni numeriche diventano numeri e {...props} viene distribuito sulla radice <svg>.

Trasformare un'icona esportata da Figma o Illustrator in un componente React.

SVG

JSX

Quando usarlo

  • Trasformare un'icona esportata da Figma o Illustrator in un componente React.
  • Verifica di come SVGR riscriverà uno SVG prima di aggiungere SVGR a una pipeline di build.

Come si usa

  1. Incolla il markup SVG o carica un file .svg; l'input non valido SVG viene rifiutato con un errore.
  2. Apri Impostazioni per disattivare l'ottimizzazione SVGO o attivare plug-in come rimuovere titolo o unire percorsi; l'anteprima sotto l'editor confronta lo SVG originale e ottimizzato.
  3. Copia il componente e rinominalo SvgComponent; passa className, larghezza o riempimento come oggetti di scena.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

Componente di reazione (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Dettagli e limiti

SVGO e SVGR vengono eseguiti localmente nel tuo browser. Il tuo markup SVG non è caricato su un server di conversione.

Con le impostazioni predefinite, i commenti, <title>, <desc> e i metadati dell'editor vengono rimossi e i dati del percorso vengono abbreviati (M5.000 12.000 L19.000 12.000 diventa M5 12h14). Disattiva l'ottimizzazione per convertire SVG come incollato.

le stringhe di stile diventano oggetti di stile e la classe diventa className.

Obiettivi di uscita Reagiscono DOM; usa SVG per React Native per react-native-svg.

FAQ

Perché la radice mantiene larghezza e altezza?

la rimozione delle dimensioni è disattivata nelle impostazioni di SVGO e SVGR utilizza le opzioni predefinite, quindi le dimensioni vengono mantenute come numeri (larghezza={24}). Sostituiscili tramite props, poiché {...props} viene dopo di loro.

fill="currentColor" mi consentirà di impostare il colore da CSS?

Sì. currentColor viene mantenuto, quindi l'icona segue il colore CSS del suo genitore. I colori codificati all'interno dei percorsi non vengono sostituiti.

Perché il <title> manca dal mio componente?

La rimozione del titolo di SVGO è attiva per impostazione predefinita. Disattivalo in Impostazioni o disattiva completamente l'ottimizzazione, se hai bisogno dello <title> per l'accessibilità.

L'uscita TypeScript è disponibile?

No. La pagina restituisce un componente JavaScript senza annotazioni di tipo.

Specifiche e riferimenti