How to Convert SVG to a React Component
Transforming SVG files into React components gives you prop-driven color, size, and class control  here's every method.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Manual SVG to JSX Conversion
The basic steps for converting an SVG file to a React component.
- Change class= to className= (JSX requirement)
- Change for= to htmlFor= on any label elements
- Change hyphenated attributes to camelCase: stroke-width → strokeWidth, fill-rule → fillRule
- Add viewBox if missing (copy from the original SVG)
- Wrap in a function: export default function Icon({ className, ...props }) { return (<svg className={className} {...props}>...</svg>) }
Automatic Conversion with SVGR
SVGR handles the conversion automatically.
- Install: npm install -D @svgr/cli
- Convert one file: npx svgr icon.svg > Icon.tsx
- Batch: npx svgr --out-dir components/icons ./svg-files/
- Options: --icon (1em size), --typescript (TypeScript output), --no-svgo (skip optimization)
- Webpack: configure @svgr/webpack to auto-convert on import in Create React App or custom webpack
Making SVG Props Dynamic
Pass size, color, and other props from parent components.
- Color via currentColor: fill='currentColor' → <Icon color='blue' style={{color:'blue'}} />
- Or explicit prop: function Icon({ fill = '#333', ...props }) { return <svg fill={fill}> }
- Size: function Icon({ size = 24 }) { return <svg width={size} height={size} viewBox='0 0 24 24'> }
- className forwarding: <svg className={cn('default-class', className)} {..props}> }
- Spread props: {…props} on svg passes all remaining props (aria-label, id, data-*) through
Frequently Asked Questions
What is SVGR?
SVGR (SVG as React) is a tool that transforms SVG files into React components. It handles JSX attribute conversion, optional SVGO optimization, TypeScript type generation, and various output formats (ESM, CJS, TypeScript).
How do I add TypeScript types to an SVG React component?
Use npx svgr --typescript. SVGR generates: interface SVGProps extends React.SVGProps<SVGSVGElement> {} and types the component as React.FC<SVGProps>.
Should I use SVGR or inline SVG in JSX?
SVGR for reusable icons used across many components. Inline SVG for one-off illustrations or when you need precise control without the SVGR toolchain. Both compile to the same inline SVG in the browser.
Can I use SVGR with Vite?
Yes  install vite-plugin-svgr and configure in vite.config.ts. Then: import Icon from './icon.svg?react' imports as a React component automatically.
How do I test an SVG React component?
SVG components render like any React component. Use React Testing Library: render(<Logo />) and test with getByRole('img') (if aria-label is set) or with a test id.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG