SVG to JSX: The Converter Every React Developer Needs Bookmarked

Raw SVG pasted into a React component throws 12+ warnings: stroke-width, fill-rule, clip-path, and every other kebab-case attribute needs to become camelCase. Inline styles need to be objects. class becomes className. An SVG to JSX converter handles all of it in one paste.

If you've ever grabbed an icon from Figma or a design library and pasted it directly into a React component, you know this dance. The browser renders it fine, but React complains about every attribute and your console fills with warnings. Fix them all by hand and it's tedious. Do it 30 times this sprint and it's a real chunk of your day.

Why Raw SVG Breaks in JSX

SVG uses kebab-case attribute names: stroke-width, fill-rule, stroke-linejoin, clip-path. HTML and the DOM accept these fine. React doesn't — it standardized on camelCase for all JSX attributes. Your <path stroke-width="2"> needs to become <path strokeWidth={2}>.

Inline styles are another trap. SVG serializes them as strings: style="fill:red;stroke:black". React expects an object: style={{ fill: "red", stroke: "black" }}. The converter parses the string and generates the object automatically.

class becomes className. for becomes htmlFor. XML namespaces like xmlns:xlink become xmlnsXlink. Every edge case is mechanical but adds up.

The currentColor Trick (Use It)

Hardcoded fills and strokes are a usability bug. If your icon uses fill="#333", every place it renders shows that specific gray. Want to theme it? Now you're passing color props through every usage, or forking the icon for each variant.

Better: replace fill="#333" with fill="currentColor". The icon inherits whatever color its parent element sets via CSS color:. One icon, infinite themes. Lucide, Heroicons, Radix, and every modern icon library works this way.

Our converter has a toggle for this. Turn it on, and every non-“none” fill or stroke becomes currentColor.

TypeScript Makes Icons Composable

A well-typed icon component accepts every SVG prop:

const MyIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg {...props} viewBox="0 0 24 24">...</svg>
);

Now consumers can pass className, width, height, aria-label, event handlers, refs, data attributes — anything. Toggle TypeScript in the converter and it generates this pattern automatically.

React.FC: Use It or Skip It?

The React team used to recommend React.FC for functional components. They no longer do — plain function declarations are preferred because they don't add implicit children and don't complicate generic inference. But lots of codebases still use FC for consistency.

The converter exposes a toggle. Match whatever your codebase does.

Figma → Production in 30 Seconds

The actual workflow I use:

1. Select the icon in Figma.
2. Right-click → Copy/Paste as → Copy as SVG.
3. Paste into the converter.
4. Toggle on: TypeScript, currentColor, Strip XML, Strip comments.
5. Name the component.
6. Copy output to components/icons/MyIcon.tsx.

Done. Reusable, themeable, typed, spreadable. 30 seconds per icon.

Stripping the XML Declaration

SVGs from design tools often include <?xml version="1.0" encoding="UTF-8"?> at the top. React errors on this. The converter strips it automatically (toggleable if you need it).

Design tools also add comments and editor metadata (“Created with Sketch”). Strip those too to keep your component files clean.

Alternatives: SVGR and Vite Plugins

For larger codebases, importing SVG directly is cleaner: import Logo from './logo.svg?react'. Tools like SVGR handle the conversion at build time via webpack or Vite plugins.

That's a better setup when you have dozens of icons that change regularly. For one-off conversions — a designer sent you an icon in Slack, you need to inline it quickly — a browser-based converter is faster than setting up a build plugin.

The File Size Question

SVGs pasted as JSX are parsed by React's reconciliation machinery, which is fine for a handful of icons but expensive for a library of 100+. For icon-heavy apps, consider:

• An SVG sprite system (<use href="#icon-id")
• Lazy-loading icons as separate SVG files via <img> tags
• Using a dedicated icon library (Lucide, Heroicons, Tabler) that ships optimized bundles

For fewer than 50 icons, inline SVG components are perfectly fine — and often the simplest option.

Bookmark It

The SVG to JSX Converter is one of those tools you use weekly once you know it exists. Bookmark it. Your future self, mid-icon-migration, will thank you.