Instantly turn raw SVG files into production-ready TypeScript & JavaScript frontend components with currentColor support.
Source size: 24 x 24 px (aspect ratio 1.000)
100% Private & Secure - Your data is never shared or stored anywhere.
Generate clean, modern, and accessible frontend components from your SVG vectors in milliseconds.
Enjoy 3 free conversions with no signup required. When you're ready for more, create a free account to unlock unlimited access.
Drop your .svg file into the workspace or paste raw SVG markup directly into the code box.
Select React (TSX/JSX), Vue 3, Svelte, Tailwind, or React Native, and customize the component name.
1-click copy clean, production-ready component code or download the component file directly.
CrushSVG parses your raw SVG markup in the browser, converts kebab-case SVG attributes to React camelCase JSX properties, formats inline styles into style objects, and wraps the SVG in a typed, customizable component interface.
Yes! The generated React (TSX/JSX) components work seamlessly with Next.js App Router, Pages Router, Vite, Create React App, Remix, and Astro.
When enabled, hardcoded fill and stroke colors in your SVG are replaced with 'currentColor'. This allows the icon to automatically inherit text colors from Tailwind CSS classes (e.g. text-blue-500) or CSS color properties.
No. All component generation and parsing happens 100% locally in your browser using client-side JavaScript. Your designs and code remain completely private.
