So nutzt du: SVG to JSX Converter
- Paste your SVG markup, open an
.svgfile, or click Sample. - Set the component name and options — TypeScript, props spread, removing fixed sizes or switching colors to
currentColor. - Check the sanitized preview to confirm the icon looks right.
- Copy the component or download it as a
.jsx/.tsxfile and import it in your React or Next.js project.
Why SVG needs converting for React
SVG is XML, and JSX is JavaScript that only looks like HTML. Pasting raw SVG into a React component usually produces warnings such as “Invalid DOM property stroke-width. Did you mean strokeWidth?” or a build error for namespaced attributes like xlink:href and inkscape:label. This converter rewrites the markup into valid JSX and wraps it in a component.
What gets converted
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* and aria-* | Kept as they are (React expects hyphens here) |
<?xml?>, <!DOCTYPE>, comments, <metadata>, editor attributes (Inkscape, Sodipodi, Sketch) | Removed |
onclick and other inline handlers, <script> | Removed — string handlers aren’t valid in React |
Making icons flexible
With Spread props enabled the component ends with {...props} on the <svg>, so you can pass className, width, aria-label or event handlers: <HeartIcon className="h-6 w-6" />. Remove width/height lets CSS size the icon (a viewBox is added from the old size if missing). Colors → currentColor replaces fills and strokes so the icon inherits the text color — ideal for single-color icon sets. The TypeScript option types props as SVGProps<SVGSVGElement>.
Accessibility
For decorative icons next to text, add aria-hidden="true". For meaningful standalone icons, keep a <title> or pass role="img" with an aria-label.
Privacy and safety
The conversion runs entirely in your browser — the SVG never leaves your device. The preview is sanitized: scripts, foreignObject, inline event handlers and external references are stripped before rendering. Building a bundle-based workflow? Tools like SVGR do the same at build time; this page is for quick one-off icons. To use an SVG as a CSS background instead, try SVG to CSS.
Auch gesucht als: svg to jsx, svg to react, svg to tsx, react svg component, svgr online, jsx converter, svg icon react, classname.
Passende Tools zu: SVG to JSX Converter
- HTML to Markdown — Paste HTML — or copy rich text straight from a web page, Google Doc or email — and get tidy Markdown you can drop into a README, wiki or static site.
- JSON to TypeScript — Paste a JSON sample — an API response, a config — and get ready-to-use TypeScript interfaces with nested types, optional properties and union types.
- Bild in Base64 — Wandle ein PNG-, JPEG-, SVG-, WebP- oder GIF-Bild in eine Base64-Daten-URI mit kopierfertigem CSS und HTML um – oder füge eine Base64-Zeichenkette ein, um eine Vorschau des Bildes anzuzeigen und es herunterzuladen.
- HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
Häufige Fragen
Why does React warn “Invalid DOM property class”?
class is a reserved word in JavaScript, so React uses className. The same applies to hyphenated SVG attributes, which must be camelCased (stroke-width → strokeWidth). This tool converts them automatically.Should I use xlinkHref or href?
href attribute, and xlink:href is deprecated. React still accepts xlinkHref, so converted code keeps working; you can switch to href if you don’t support very old browsers.How do I change the icon color with CSS?
color of its parent, so className="text-red-500" or style={{ color: "red" }} recolors it.Does the output work in Next.js and Vite?
Does it work for React Native?
react-native-svg, which uses capitalized components such as <Svg> and <Path>. The camelCased attributes from this tool are a good starting point, but rename the elements.