SVG to JSX Converter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round"><path d="M4 12h16"/><path d="M12 4v16"/></svg>

import type { SVGProps } from "react";

export function SvgComponent(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#111827" strokeWidth="2" strokeLinecap="round" {...props}>
      <path d="M4 12h16" />
      <path d="M12 4v16" />
    </svg>
  );
}

export default SvgComponent;

The defaults: both hyphenated attributes take camelCase prop spellings, the spread lands last so a caller can override them, and path data is copied character for character.

<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path fill="#e11d48" d="M8 1.6l1.9 4.3 4.6.4-3.5 3 1 4.6L8 11.5l-4 2.4 1-4.6-3.5-3 4.6-.4z"/></svg>

import type { SVGProps } from "react";

export function StarIcon({ size = 16, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) {
  return (
    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width={size} height={size} {...props}>
      <path fill="currentColor" d="M8 1.6l1.9 4.3 4.6.4-3.5 3 1 4.6L8 11.5l-4 2.4 1-4.6-3.5-3 4.6-.4z" />
    </svg>
  );
}

export default StarIcon;

Icon settings: the hardcoded pink becomes currentColor, and the root size collapses into one size prop defaulting to the original width.

<svg viewBox="0 0 10 10" width="10" height="10" xmlns="http://www.w3.org/2000/svg"><rect class="tile" style="fill:#0ea5e9;stroke-width:0.5;font-family:Inter, sans-serif" x="1" y="1" width="8" height="8" rx="1"/></svg>

import type { SVGProps } from "react";

export function SvgComponent(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 10 10" width="10" height="10" xmlns="http://www.w3.org/2000/svg" {...props}>
      <rect className="tile" style={{ fill: "#0ea5e9", strokeWidth: "0.5", fontFamily: "Inter, sans-serif" }} x="1" y="1" width="8" height="8" rx="1" />
    </svg>
  );
}

export default SvgComponent;

class arrives as className, and three declarations become one object literal — the font stack keeping its comma and spaces.

<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#0f172a" stroke-width="2"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" d="M8 12l3 3 5-6"/></g></svg>

import Svg, { Circle, G, Path } from "react-native-svg";

export function CheckBadge(props) {
  return (
    <Svg viewBox="0 0 24 24" width="24" height="24" {...props}>
      <G fill="none" stroke="#0f172a" strokeWidth="2">
        <Circle cx="12" cy="12" r="9" />
        <Path strokeLinecap="round" d="M8 12l3 3 5-6" />
      </G>
    </Svg>
  );
}

export default CheckBadge;

React Native, in JavaScript: three elements take capitalised names, the import lists exactly those, and xmlns is reported as left out.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Drawn in Inkscape -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:version="1.1.2" width="8px" height="8px" viewBox="0 0 8 8"><path inkscape:label="frame" d="M0 0h8v8H0z"/></svg>

import type { SVGProps } from "react";

/* Drawn in Inkscape */

export function SvgComponent(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" {...props}>
      <path d="M0 0h8v8H0z" />
    </svg>
  );
}

export default SvgComponent;

An untouched editor export: the declaration goes, the comment survives, the inkscape: attributes are named as dropped and 8px becomes 8 — six chips.