How to Convert SVG to React (JSX/TSX) in Your Browser

React projects rarely want raw <svg> dumps forever. You usually need a component: props for className, typed SVGProps, and JSX-friendly attributes (strokeWidth instead of stroke-width). Doing that by hand is tedious—and uploading icons to a converter SaaS is unnecessary when the transform can run locally.

SVGForge’s SVG Component Converter turns SVG into React (JSX/TSX) (and other frameworks) 100% in your browser. Paste once, copy a component, ship.

What you get

• JSX or TSX output with a default functional component
• Attribute renaming for React (class → className, kebab-case → camelCase where needed)
• Optional TypeScript props typing
• Same workflow for Vue / Svelte / Solid / Web Components when you need them later

Primary CTA for this guide: stay on React mode and export clean components for your design system.

Step 1: Get an SVG

Any of these works:

1. Paste markup from Figma / Illustrator / your repo
2. Upload a .svg file
3. Pull an icon from the SVGForge library (for example Lucide), copy SVG, then paste
4. Tweak colors or layers first in the SVG Editor, then export SVG

Tip: run the SVG Optimizer before converting if the export is noisy—smaller input, cleaner component.

Step 2: Open the Component Converter

1. Visit svgforge.dev/svg-tools/component-converter.
2. Load your SVG (upload / paste / sample).
3. Choose React and pick JSX or TSX.
4. Preview the generated component on the right.

You should see something like a default Icon (or similarly named) function that spreads props onto the root <svg>.

Step 3: Copy into your app

1. Copy the output (or download the file).
2. Drop it into components/icons/….
3. Use it like any other component:

import Icon from './Icon'

export function NavHome() {
  return <Icon className="h-5 w-5 text-slate-700" aria-hidden />
}

For TypeScript, TSX mode keeps React.SVGProps<SVGSVGElement> (or equivalent) so className, width, and aria-* stay typed.

JSX vs TSX — which to pick?

You can switch modes anytime and re-copy—conversion is instant and local.

Practical recipes

Design-system icon set
Optimize → Component Converter (TSX) → commit under icons/.

One-off marketing glyph
Paste SVG → JSX → inline in a landing section.

Iconify / Lucide icon as React
Browse the set on SVGForge → copy SVG → convert → optionally recolor to currentColor first so CSS color drives the icon.

Untrusted third-party SVG
Sanitize → convert → review the component before merge.

FAQ

Does conversion upload my SVG?

No. The Component Converter runs in your browser.

Will stroke-width work in React?

The converter rewrites common presentation attributes to React’s camelCase form so you don’t fight the DOM.

Can I convert to Vue in the same tool?

Yes—the converter supports multiple frameworks. This article focuses on React; for Vue SFC see our companion guide on exporting Iconify icons as Vue 3 SFCs.

Do library icons stay under their original license?

Yes. Converting or editing does not grant extra rights. Check the set’s license on SVGForge before commercial use.

Quick checklist

1. Prepare a clean SVG (optimize if needed)
2. Open the Component Converter
3. Select React + JSX or TSX
4. Copy into your components folder
5. Pass className / size via props

Try it now

Open the free SVG Component Converter, paste an icon, and copy a React component in seconds—without uploading. Explore 368k+ open-source icons when you need the next glyph.