SVG to TSX
SVG to TSX
Upload SVG files for conversion.
Click to upload or drag & drop SVGs
SVG to TSX
Like SVG to JSX, but with proper TypeScript types. Get a component that your IDE understands and TypeScript won't complain about.
Why typed SVG components?
In a TypeScript project, you want your SVG components to be properly typed:
- Autocomplete works - Your IDE knows what props the component accepts
- Type errors on wrong props - Catch mistakes before runtime
- Refactoring is safe - TypeScript tracks usage when you change things
What you get
import { SVGProps } from 'react';
const MyIcon = (props: SVGProps<SVGSVGElement>) => (
<svg viewBox="0 0 24 24" {...props}>
<path d="M12 2L2 7l10 5 10-5-10-5z" />
</svg>
);
export default MyIcon;The SVGProps<SVGSVGElement> type means you can pass any valid SVG attribute and TypeScript knows it's okay.
forwardRef option
If you need to access the DOM element (for animations, measurements, etc.), we can generate a forwardRef version that lets you pass a ref to the SVG element.
Frequently Asked Questions
TSX is JSX with TypeScript types. The component works the same, but you get type checking and better IDE support.
Yes. The output uses React's SVGProps type, so all standard SVG attributes are properly typed.
Yes. You can extend the interface to add props like size or color that map to internal SVG attributes.
Yes. Toggle the forwardRef option to generate a component that can accept a ref prop.
Yes. Standard TSX components work with any React framework - Next.js, Gatsby, Create React App, etc.