SVG-zu-React-JSX/TSX & Vue-Konverter

Wandeln Sie SVG-Icons mit einem Klick in saubere React-TSX-, React-JSX- oder Vue-3-Komponenten inkl. camelCase-Attributen und currentColor um.

Oder SVG-Code direkt unten einfügen / bearbeiten
import type { SVGProps } from "react"

export function SvgIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="128" height="64" viewBox="0 0 128 64" {...props}>
  
  
  <rect x="16.12" y="12.57" width="96" height="40" rx="8" fill="currentColor" stroke="currentColor" strokeWidth="2"/>
  <circle cx="44.89" cy="32.44" r="10.25" fill="currentColor"/>
</svg>
  )
}

export default SvgIcon

Technische Daten & lokaler Datenschutz

Verarbeitung
100 % lokal im Browser (kein Upload)
Kern-Engine
SVGR Attribute AST Mapper (React TSX / JSX / Vue 3)
Kosten & Lizenz
Kostenlos, kein Wasserzeichen, ohne Anmeldung

Häufig gestellte Fragen

Wandeln Sie SVG-Icons mit einem Klick in saubere React-TSX-, React-JSX- oder Vue-3-Komponenten inkl. camelCase-Attributen und currentColor um. (100 % lokal im Browser (kein Upload))