How to convert SVG to React (JSX) and React Native

Why convert SVG to a React component?

Dropping SVG into an <img> works for static art, but components win when you need to change color, size, or accessibility from props. Inline JSX (or react-native-svg) lets you pass className, width, fill, and ARIA attributes like any other React element.

Design tools often export verbose SVG. Cleaning it once and wrapping it as Icon keeps your UI kit consistent across web and mobile.

Worked example: icon for a dark UI

A common handoff: Figma exports an icon with hard-coded #000 fills. In a dark app that mark disappears or fights the theme. Here is the path we use with SVGEditor.

Before — static SVG (fine as <img>, weak as UI chrome):

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path fill="#000000" d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path fill="#000000" d="M2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

After — paste into SVGEditor, open the React tab, then set strokes/fills to currentColor (or edit the exported JSX once):

export default function LayersIcon(props) {
  return (
    <svg viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
      <path
        d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinejoin="round"
      />
    </svg>
  );
}

// Nav / button — color follows theme
<LayersIcon className="text-sky-300" aria-hidden="true" />

Same markup on the React Native tab becomes <Svg> / <Path> with numeric props — useful when design shares one SVG and web + mobile both need a component.

Manual path: SVG → React JSX

For a tiny icon you can convert by hand in a minute:

1. Copy the SVG markup (or download the .svg file and open it as text).
2. Rename attributes to JSX: class → className, stroke-width → strokeWidth, fill-rule → fillRule, and so on.
3. Wrap the root <svg> in a function component and spread {...props} so callers can override size and style.
4. Prefer fill="currentColor" when the icon should inherit text color.

export default function Icon(props) {
  return (
    <svg
      viewBox="0 0 24 24"
      width="24"
      height="24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M12 2L2 7l10 5 10-5-10-5z"
        stroke="currentColor"
        strokeWidth="1.5"
      />
    </svg>
  );
}

Keep viewBox. It is what makes the icon scale cleanly when you change width / height.

Faster path: convert in SVGEditor

SVGEditor runs entirely in your browser. Paste or upload SVG, preview it live, then open the export panel:

1. Paste SVG on the left (or use Upload).
2. Open the React tab and copy the generated component.
3. For mobile, switch to React Native and copy that output instead.

The React export produces a default Icon component with {...props} on the root <svg>. The React Native export maps tags to react-native-svg (Svg, Path, Circle, …) and adds the matching import.

Nothing is uploaded to a backend — conversion stays on your device, same as preview and share links.

React Native notes

React Native does not render raw HTML SVG. Install react-native-svg and use the generated component:

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

export default function Icon(props) {
  return (
    <Svg viewBox="0 0 24 24" width={24} height={24} {...props}>
      <Path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" strokeWidth={1.5} />
    </Svg>
  );
}

Numeric props like width and strokeWidth should be numbers in RN, not quoted strings. SVGEditor’s React Native export follows that convention.

SVGR vs paste-JSX (and Next.js)

Teams usually pick one of two pipelines. Neither is “wrong” — they solve different jobs.

• SVGR / Vite plugin / webpack loader: keep .svg files in the repo and import them as components. Great when designers drop files into icons/ and CI rebuilds the bundle. Extra config, but zero copy-paste.
• Paste JSX from a converter (like SVGEditor): best for one-off icons, shareable drafts, or when you do not want another build plugin. You own a normal .jsx / .tsx file — easy to tweak path props by hand.

In Next.js, do not put interactive icons through next/image. That helper is for raster (and some static assets); it will not give you prop-driven fill / stroke the way an inline component does. Prefer either SVGR or a pasted component under components/icons/.

// components/icons/Mark.tsx — pasted from SVGEditor React export
export default function Mark(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
      <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" strokeWidth={1.5} />
    </svg>
  );
}

// usage — color follows CSS / theme
<Mark className="text-sky-400" aria-hidden="true" />

For dark mode, hard-coded fills fight the theme. Export (or edit) strokes/fills to currentColor, then set color on the component or a parent. That is the usual reason people convert SVG to React instead of shipping a static .svg URL.

Practical tips

• Color: use currentColor (or pass color / fill via props) instead of hard-coded hex when the icon must match the theme.
• Size: set a default width/height, keep viewBox, and let props override.
• Accessibility: decorative icons get aria-hidden="true"; meaningful ones need a title or aria-label.
• Cleanup: remove editor metadata, unused ids, and empty groups before committing the component — smaller SVG means smaller JSX.
• TypeScript: type props as React.SVGProps<SVGSVGElement> (web) so className, onClick, and ARIA attrs stay typed.

FAQ

SVG as <img> vs inline React component?

Use <img> (or a static asset) for large illustrations you never recolor. Use a component when the same mark appears in buttons, nav, and themes with different colors.

Does the converter change my paths?

SVGEditor rewrites the tree into JSX / RN tags and JSX attribute names. It does not re-path or optimize geometry the way SVGO does — preview first if the SVG is unusual.

SVGR or SVGEditor — which should I use?

Use SVGR when icons are a steady stream of .svg files in the repo. Use SVGEditor when you need a quick JSX / React Native snippet, a live preview, or a share link without touching the bundler.

Can I share the SVG with a teammate?

Yes — use Copy link or Copy iframe in the editor. The payload lives in the URL hash on their side; treat share links like the file itself.

Convert your SVG now

Paste once, preview live, export React or React Native, or download PNG / Data URI — free, no account.