Entwickler-ToolsFrontend Tools

Lokale Engine

SVG zu React JSX & CSS Data-URI Konverter

Konvertieren Sie SVG-Icons in saubere React-Komponenten und CSS Data-URIs.

Komponentenname:

{...props} übergeben

Vorschau-Hintergrund:

SVG-Code

Visuelle Vorschau

React-JSX-Komponente

import React from 'react';

export const CustomIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <polyline points="12 6 12 12 16 14"></polyline>
  </svg>
);

CSS-Data-URI (CSS-Hintergrund)

background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%3E%3C%2Fcircle%3E%20%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%3E%3C%2Fpolyline%3E%20%3C%2Fsvg%3E");

Übersicht

Konvertieren Sie SVG-Tags automatisch in React-Attribute mit Sofortvorschau.

100% Privat: Alle Operationen laufen lokal auf Ihrem Gerät.

SVG to JSX Converter: Transform Vector Graphics into React Components

The SVG to JSX Converter cleanly transforms raw SVG vector files and markup into modular, production-ready React, Next.js, and React Native functional components.

Sanitizes XML standards into idiomatic React JSX: automatically maps kebab-case attributes (fill-rule, stroke-width, clip-path) to camelCase equivalents and converts inline styles into CSS objects.

Generates fully customizable components supporting props spread, dynamic fill/stroke colors, and seamless Tailwind CSS integration.

How to Convert Raw SVG to React JSX

Schnell & Intuitiv

Paste SVG Code

Drop an .svg vector file or paste raw SVG XML markup into the source editor.

Configure Output

Choose JSX or TypeScript (TSX) output and specify component name conventions.

Copy React Component

Grab the production-ready component code ready to drop into your design system.

Wichtigste Funktionen & Vorteile

100% Datenschutz im Browser

Keine Server-Uploads. Alle Daten bleiben sicher in Ihrem lokalen Speicher.

Sofortige Ausführung ohne Wartezeit

Verzögerungsfreie Echtzeitergebnisse ohne Download-Warteschlangen.

Unbegrenzt & Kostenlos

Keine Registrierung, keine versteckten Kosten und kein Abonnement.

Vollständig Mobil-Optimiert

Reibungslose Bedienung auf Smartphones, Tablets und Laptops.

Lokale Browser-Architektur

Sichere W3C-konforme Client-Verarbeitung mit Hardware-Beschleunigung.

Expertentipps & Best Practices

Replace hardcoded fill or stroke hex colors with currentColor so the icon automatically inherits its parent text color in UI layouts.

Häufig gestellte Fragen

2 Fragen & Antworten

Why does React require SVG attribute conversion?

React JSX expects valid JavaScript property expressions. Hyphenated XML attributes like stroke-dasharray cause syntax warnings in standard JSX without camelCase conversion.

Can I style converted SVG components with Tailwind CSS?

Yes! The generated components accept standard className props, letting you control width, height, hover colors, and transitions using utility classes.