ZeroTool Workbench
SVG to JSX Converter
Convert SVG to a React JSX component instantly in your browser. Handles camelCase attributes, className, optional TypeScript, forwardRef, and memo wrapping. Free, no signup.
How to Use
- Paste your SVG code into the left textarea.
- Enter a component name (default:
MyIcon). The first letter is auto-uppercased. - Toggle TypeScript, forwardRef, or memo options as needed.
- The JSX component output appears instantly in the right textarea.
- Click Copy to copy it to your clipboard.
Attribute Conversion Rules
| SVG | JSX |
|---|---|
stroke-width | strokeWidth |
stroke-linecap | strokeLinecap |
fill-rule | fillRule |
clip-path | clipPath |
class | className |
font-size | fontSize |
text-anchor | textAnchor |
xmlns="..." | (removed) |
Output Modes
- Default: Plain function component with no TypeScript annotation.
- TypeScript: Adds
React.FC<React.SVGProps<SVGSVGElement>>type so props likeclassName,style, andonClickwork without extra declarations. - forwardRef: Wraps the component in
React.forwardRef, exposing the SVG element ref to the parent. - memo: Wraps the final export in
React.memoto skip unnecessary re-renders.
Common Use Cases
- Converting Figma or Illustrator SVG exports into React icon components
- Migrating an SVG icon library to a JSX-based design system
- Making SVG icons accept
className,style, and other React props - Building accessible icon components that accept an
aria-labelvia spread props
FAQ
What does an SVG to JSX converter do?
It transforms a raw SVG file into a reusable React component. Key changes include converting hyphenated attributes to camelCase (stroke-width → strokeWidth), renaming class to className, removing the xmlns declaration, and wrapping the SVG markup inside a function component.
Why are SVG attributes renamed in JSX?
JSX is compiled to JavaScript, and hyphenated property names are not valid as JS identifiers. React requires camelCase versions such as strokeWidth, fillRule, and clipPath instead of the SVG/HTML attribute names.
What does the TypeScript option do?
When enabled, the output uses React.FC<React.SVGProps<SVGSVGElement>> as the component type, giving you full TypeScript support including prop autocomplete for SVG attributes.
What is forwardRef used for?
forwardRef lets parent components attach a ref to the underlying SVG element. Useful when you need programmatic access to the DOM node, for example to measure it or trigger animations.
What does memo wrapping do?
React.memo wraps the component so it only re-renders when its props change. This is a performance optimization for icon components that receive the same props on most renders.
Is anything sent to a server?
No. The conversion runs entirely in your browser using JavaScript. No SVG data is transmitted.