SVG to React Component Converter
Convert any SVG file to a clean React JSX component — with proper camelCase attributes, TypeScript support, and props for customization.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why Convert SVG to React Components?
React SVG components allow type-safe usage, prop-driven customization, and tree-shaking unused icons from the final bundle.
- Type-safe: import { HomeIcon } from './icons' — TypeScript catches incorrect usage
- Customizable: pass size, color, className as props
- Tree-shakeable: only imported icons are bundled
- Consistent API: all icons use the same props interface
SVGR: The Standard SVG to React Tool
SVGR is the most popular SVG-to-React converter. It transforms SVG attributes to camelCase, adds TypeScript types, and wraps in a React component.
- Online: react-svgr.com/playground — paste SVG, get React component instantly
- CLI: npx @svgr/cli icon.svg > Icon.tsx
- Webpack: @svgr/webpack for automatic build-time conversion
- Vite: vite-svg-loader?react or @svgr/rollup
SVG Attribute Changes for React
React JSX requires camelCase attribute names — SVG uses kebab-case and some reserved words differ.
| SVG Attribute | React JSX Equivalent |
|---|---|
| class | className |
| stroke-width | strokeWidth |
| stroke-linecap | strokeLinecap |
| clip-path | clipPath |
| viewbox | viewBox |
| fill-rule | fillRule |
| xlink:href (deprecated) | href |
Frequently Asked Questions
How do I convert SVG to React TypeScript component?
Use SVGR with TypeScript output: npx @svgr/cli --typescript icon.svg > Icon.tsx. SVGR generates proper React.FC<SVGProps<SVGSVGElement>> type annotations.
Should I convert SVG to React components or use img tags?
Components for: icons that need CSS color control (fill: currentColor), animation, or dynamic props. Img tags for: logos, illustrations that are static and don't need CSS access.
Can I auto-convert a folder of SVGs to React components?
Yes. SVGR CLI: npx @svgr/cli --out-dir ./components/icons ./icons/*.svg — converts every SVG in /icons to a component in /components/icons.
Does SVGR work with Next.js?
Yes. Add to next.config.js: webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] }); return config; }. Then: import HomeIcon from './home.svg'
How do I add a custom color prop to an SVGR component?
Set fill='currentColor' in the SVG source. SVGR preserves this. Control color via CSS: <HomeIcon style={{color: 'blue'}} /> or className='text-blue-500' with Tailwind.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free