Vai al contenuto
Numio

Trasforma SVG per le app React Native — Numio

Trasforma il markup SVG in un componente React Native che importa Svg, Path, G e altri elementi da react-native-svg. L'ottimizzazione SVGO viene eseguita per prima e gli attributi diventano oggetti di scena JSX con valori numerici come numeri (strokeWidth={2}).

Conversione di un'icona esportata da Figma o Sketch in un componente per un'app Expo o React Native che utilizza react-native-svg.

SVG

React Native

Quando usarlo

  • Conversione di un'icona esportata da Figma o Sketch in un componente per un'app Expo o React Native che utilizza react-native-svg.
  • Rimpicciolire un SVG gonfio (titoli, metadati dell'editor, definizioni inutilizzate) prima di spedirlo come componente nativo.

Come si usa

  1. Incolla markup SVG nell’editor SVG oppure trascina un file .svg; l’input deve essere SVG valido, altrimenti ricevi "This is not a valid svg code.".
  2. Apri SVGO Impostazioni per disattivare l'ottimizzazione o attivare singoli plug-in come rimuovere titolo, rimuovere casella di visualizzazione o unire percorsi; l'anteprima sotto l'editor confronta l'originale e lo SVG ottimizzato.
  3. Copia l'output del pannello React Native in un file .js o .tsx e installa react-native-svg nella tua app.

Marcatura SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

Componente React Native (react-native-svg)

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

Dettagli e limiti

L’ottimizzazione SVGO e la generazione JSX con SVGR vengono eseguite localmente in Web Worker del browser. SVGR usa native: true per generare il componente React Native; il markup SVG non viene caricato su un server.

Gli elementi che react-native-svg non supporta vengono rimossi e SVGR aggiunge un commento come /* SVGR ha eliminato alcuni elementi non supportati da react-native-svg: filter */.

SVGO integra le regole <style> e quindi trasforma le dichiarazioni di stile in attributi, quindi style="stroke:blue" diventa ictus="#00f" (stroke prop). <title> viene rimosso per impostazione predefinita.

larghezza, altezza e viewBox vengono mantenuti e {...props} viene distribuito sul root Svg in modo da poter sovrascrivere dimensione o colore.

FAQ

L'output necessita di react-native-svg?

Sì. Il componente importa Svg e componenti di elementi come Path, Circle e G da react-native-svg, che devono essere installati nel tuo progetto; non funziona con le semplici visualizzazioni React Native.

Posso mantenere viewBox in modo che l'icona venga ridimensionata?

Sì. la casella di rimozione della visualizzazione è disattivata per impostazione predefinita, quindi viewBox rimane sull'elemento Svg. Passa gli oggetti di scena di larghezza e altezza quando usi il componente per ridimensionarlo.

Cosa succede ai filtri e ai gradienti?

Gli elementi senza un equivalente react-native-svg, come filter, vengono eliminati con un commento nella parte superiore del file. I gradienti inutilizzati vengono rimossi dalle definizioni inutili di rimozione di SVGO.

Il mio SVG è stato caricato?

No. Ottimizzazione, generazione del componente e anteprima avvengono nel browser. Il markup SVG non viene caricato su un server.

Specifiche e riferimenti