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