import React from 'react'; interface IconProps extends React.SVGProps<SVGSVGElement> { size?: number;} export const Icon: React.FC<IconProps> = ({ size = 24, ...props }) => { return ( <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}> <circle cx="12" cy="12" r="10"/> <path d="m9 12 2 2 4-4"/></svg> );}; export default Icon;Yes, completely free with no sign-up required. Convert unlimited SVGs to React components.
No, all conversion happens in your browser. Your SVG code never leaves your device.
Copy the SVG markup from your design tool (Figma, Illustrator, etc.) and paste it into the input field. Choose between functional component with TypeScript or JavaScript. Enter a component name using PascalCase like "IconArrow" or "LogoCompany". Review the converted React component - SVG attributes are automatically converted to camelCase. Copy the component code and save it to your components folder, then import and use it with width, height, and className props.
Yes! The generated component includes proper TypeScript prop types for width, height, className, and other SVG attributes.