Zum Inhalt springen
SvgJsx
Sprache: Deutsch

SVG in React Native umwandeln (react-native-svg)

React Native kann <svg>-Tags nicht direkt rendern. Dieser Konverter schreibt dein SVG in react-native-svg-Komponenten wie Svg, Path, G und Circle um – inklusive der richtigen Imports.

Schnellvorlagen:
.svg-Dateien hierher ziehen oderDateien werden lokal mit FileReader gelesen und niemals hochgeladen.
Optionen
Export:
import Svg, { G, Path } from "react-native-svg";
import type { SvgProps } from "react-native-svg";

const HeartIcon = (props: SvgProps) => (
  <Svg width="24" height="24" viewBox="0 0 24 24" {...props}>
    <G id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <Path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </G>
  </Svg>
);

export default HeartIcon;

Hinweise

  • class-Attribute wurden entfernt, weil React Native sie nicht unterstützt.

Vorschau

Vorschau des konvertierten SVG
Original-SVG
706 B
Optimiertes SVG
538 B(-24 %)
Komponente
648 B

Was bei React Native anders ist

react-native-svg stellt für jedes SVG-Element eine großgeschriebene Komponente bereit: <path> wird zu <Path>, <g> zu <G> und <linearGradient> zu <LinearGradient>. Der Konverter bildet alle unterstützten Elemente ab, erzeugt eine einzige Import-Zeile mit genau den verwendeten Komponenten und typisiert die Props als SvgProps.

Elemente ohne natives Gegenstück wie <title>, <desc>, <style> oder <metadata> werden mit einem Hinweis verworfen, damit die Komponente zur Laufzeit nicht abstürzt. Auch class-Attribute werden entfernt, da React Native keine CSS-Klassen kennt.

react-native-svg einrichten

So verwendest du die erzeugte Komponente:

  • Installiere die Bibliothek: npx expo install react-native-svg (Expo) oder npm install react-native-svg (React Native ohne Expo).
  • Speichere den konvertierten Code als .tsx- oder .jsx-Datei in deinem Projekt.
  • Rendere sie wie jede andere Komponente und übergib width, height oder color.
  • Aktiviere currentColor und übergib eine color-Prop, um das Icon von außen einzufärben.

Tipps für mobile Icons

Halte Icons einfach: Filter und Masken sind auf schwächeren Android-Geräten teuer zu rendern. Runde Koordinaten auf eine oder zwei Nachkommastellen, um das JavaScript-Bundle zu verkleinern, und bevorzuge bei sehr kleinen Icons Füllungen statt Konturen, weil dünne Linien auf Displays ohne hohe Pixeldichte unscharf wirken können.

Häufige Fragen

Funktioniert das mit Expo?

Ja. react-native-svg ist Teil des Expo SDK; installiere es mit npx expo install react-native-svg, dann funktioniert die erzeugte Komponente in Expo Go und in Development Builds.

Warum wurde mein <style>-Element entfernt?

react-native-svg unterstützt keine CSS-Stylesheets. Übertrage die Regeln vor der Konvertierung in Attribute wie fill und stroke oder setze sie direkt an den Elementen.

Wie ändere ich die Icon-Farbe in React Native?

Aktiviere currentColor und übergib color="#ff0000" an die Komponente. react-native-svg löst currentColor über die color-Prop des Svg-Elements auf.

Brauche ich noch react-native-svg-transformer?

Nicht, wenn du Icons vorab konvertierst. Der Transformer erlaubt den direkten Import von .svg-Dateien, während dieses Tool normale Komponenten erzeugt, die keine Metro-Konfiguration brauchen.