Zum Inhalt springen
Numio

SVG in React Native umwandeln — Numio

Wandelt SVG-Markup in eine React-Native-Komponente um, die Svg, Path, G und weitere Elemente aus react-native-svg importiert. Zuerst läuft die SVGO-Optimierung, dann werden Attribute zu JSX-Props, numerische Werte als Zahlen (strokeWidth={2}).

Ein aus Figma oder Sketch exportiertes Icon in eine Komponente für eine Expo- oder React-Native-App umwandeln, die react-native-svg verwendet.

SVG

React Native

Wann sie hilft

  • Ein aus Figma oder Sketch exportiertes Icon in eine Komponente für eine Expo- oder React-Native-App umwandeln, die react-native-svg verwendet.
  • Ein aufgeblähtes SVG (Titel, Editor-Metadaten, ungenutzte defs) verkleinern, bevor es als native Komponente ausgeliefert wird.

Anwendung

  1. Füge SVG-Markup in den SVG-Editor ein oder ziehe eine .svg-Datei darauf; die Eingabe muss gültiges SVG sein, sonst erscheint "This is not a valid svg code."
  2. Öffne SVGO Settings, um die Optimierung abzuschalten oder einzelne Plugins wie remove title, remove view box oder merge paths umzuschalten; die Vorschau unter dem Editor vergleicht das ursprüngliche und das optimierte SVG.
  3. Kopiere die Ausgabe aus dem Bereich React Native in eine .js- oder .tsx-Datei und installiere react-native-svg in deiner App.

SVG-Markup

<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>

React-Native-Komponente (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

Details und Einschränkungen

Die SVGO-Optimierung läuft in einem Web Worker in deinem Browser, die JSX-Erzeugung aber auf dem Server: Das optimierte SVG wird an /api/svg-to-jsx gesendet, das SVGR mit native: true ausführt.

Elemente, die react-native-svg nicht unterstützt, werden entfernt, und SVGR fügt einen Kommentar wie /* SVGR has dropped some elements not supported by react-native-svg: filter */ hinzu.

SVGO bettet <style>-Regeln inline ein und wandelt style-Deklarationen anschließend in Attribute um, sodass style="stroke:blue" zu stroke="#00f" (stroke-Prop) wird. <title> wird standardmäßig entfernt.

width, height und viewBox bleiben erhalten, und {...props} wird auf dem Wurzel-Svg verteilt, sodass du Größe oder Farbe überschreiben kannst.

FAQ

Braucht die Ausgabe react-native-svg?

Ja. Die Komponente importiert Svg und Element-Komponenten wie Path, Circle und G aus react-native-svg, das in deinem Projekt installiert sein muss; mit einfachen React-Native-Views funktioniert sie nicht.

Kann ich die viewBox behalten, damit das Icon skaliert?

Ja. remove view box ist standardmäßig aus, daher bleibt viewBox am Svg-Element erhalten. Übergib beim Verwenden der Komponente width- und height-Props, um sie zu skalieren.

Was passiert mit Filtern und Verläufen?

Elemente ohne Entsprechung in react-native-svg, etwa filter, werden mit einem Kommentar am Dateianfang entfernt. Ungenutzte Verläufe entfernt SVGOs remove useless defs.

Wird mein SVG hochgeladen?

Das optimierte SVG wird an den Endpunkt /api/svg-to-jsx der Seite gesendet, um die Komponente zu erzeugen; Optimierung und Vorschau bleiben in deinem Browser.

Spezifikationen und Referenzen