SVG to React Component
Turn raw SVG markup into a production-ready React (or React Native) component. It cleans up editor cruft, converts every attribute to valid JSX, and gives you forwardRef, memo, TypeScript props, currentColor theming, and an accessible title — live, with a preview of your icon as you tweak it.
About this ToolHow it works, benefits & use casesTap to collapse
Pasting raw SVG into a React file breaks in ways the compiler does not always explain: stroke-width, fill-rule, and clip-rule are invalid props, class collides with className, xlink:href has to become xlinkHref, and inline style strings must be rewritten as objects. This converter does all of that and then hands you the exact component shape you ship. Paste an SVG exported from Figma, Illustrator, or any icon set and it cleans up the editor cruft (XML declarations, comments, metadata, inkscape and sodipodi attributes, empty groups), converts every attribute to valid JSX, and builds a complete component. You choose the language (TypeScript .tsx typed with React.SVGProps, or plain .jsx), the export style (named, default, or both), and the wrappers you want: forwardRef so parents can grab the DOM node, React.memo for cheap re-renders, a spread of {...props} onto the root, currentColor swapping so the icon inherits text color, an accessible title prop, and stripped width/height so the icon scales to its container. A React Native mode rewrites the elements to react-native-svg (Svg, Path, Circle) with the right import. Everything updates live next to a safe preview of your icon and a quick analysis of its dimensions, element count, and colors.
How to Use
- 1Paste your SVG into the markup panel, or click Load example to drop in a sample clock icon.
- 2Set a Component name (it becomes the export and the suggested file name) and pick TypeScript (.tsx) or JavaScript (.jsx).
- 3Choose an export style: named, default, or both.
- 4Toggle the transforms you want: spread props, currentColor, forwardRef, React.memo, remove width/height, strip ids, an accessible title prop, or React Native output.
- 5Read the generated component in the output panel, then copy it, download it as a ready-to-save file, or share the configuration via URL.
Key Benefits
- Converts every SVG attribute to valid JSX — strokeWidth, fillRule, clipRule, className, xlinkHref, and more
- Cleans up exporter noise: XML declarations, comments, metadata, inkscape/sodipodi attributes, and empty groups
- Rewrites inline style strings into proper React style objects automatically
- Optional forwardRef and React.memo wrappers for ref-forwarding and render-cheap icons
- TypeScript output is typed with React.SVGProps<SVGSVGElement> and a generated props type
- currentColor mode makes monochrome icons inherit text color for light and dark themes
- React Native mode emits react-native-svg elements (Svg, Path, Circle) with the correct import
- Live icon preview plus an analysis card showing dimensions, element count, and colors
Common Use Cases
- Turning an exported Figma or Illustrator SVG into a reusable, typed icon component
- Building an icon library where every glyph forwards a ref, accepts props, and inherits currentColor
- Porting a web SVG icon to React Native with react-native-svg element names in one step
- Cleaning a designer-handoff SVG full of class, inline styles, and editor metadata into valid JSX
- Wrapping a one-off illustration as a memoized component without hand-fixing attribute names
Preview
MyIcon.tsx
import * as React from 'react';
export type MyIconProps = React.SVGProps<SVGSVGElement>;
const MyIcon = ({ ...props }: MyIconProps) => {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" />
<path d="M12 6v6l4 2" />
</svg>
);
};
export { MyIcon };
Paste an exported SVG — from Figma, Illustrator, an icon set, anywhere.
Component options
Why not just paste the SVG?
React rejects raw SVG: stroke-width, fill-rule, and clip-rule are invalid props, class collides with className, and inline style="…" strings must become objects. This tool rewrites all of it, then wraps the result in the component shape you actually ship.
currentColor and theming
Enable Use currentColor to swap concrete fill/stroke colors for currentColor so the icon inherits the surrounding text color — perfect for monochrome icon sets that need to adapt to light and dark themes. none is always preserved.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- SVG OptimizerOptimize and compress SVG files
- TypeScript FormatterFormat and beautify TypeScript code
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- Icon System BuilderNormalise SVGs into a typed icon system — SVG sprite, React/Vue components, CSS sprite, index & manifest — with a live grid and lint
- Skeleton Screen GeneratorBuild layout-matched skeleton loaders (card/list/article/table) with shimmer/pulse/wave and a live preview
- HTML to JSXConvert HTML to React JSX
Hyphenated attributes are mapped to camelCase — stroke-width becomes strokeWidth, stroke-linecap, fill-rule, clip-rule, and the rest. class becomes className, for becomes htmlFor, and namespaced attributes like xlink:href and xmlns:xlink become xlinkHref and xmlnsXlink. data-* and aria-* attributes are left as-is because React keeps them in their original form.
It replaces concrete fill and stroke colors (hex values, named colors, rgb) with the keyword currentColor, so the icon takes its color from the surrounding text or from CSS. This is ideal for monochrome icon sets that should adapt to light and dark themes. Values of none, transparent, and existing currentColor are always left untouched, and url(...) paint references (gradients) are preserved.