SVG to React Component
Convert SVG code to React JSX components. Handles attribute renaming, style objects, TypeScript, and memo wrapping.
interface MyIconProps {
className?: string;
size?: number;
}
export default function MyIcon({ className, size = 24 }: MyIconProps) {
return (
<svg className={className} 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">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="16" x2="12" y2="12"/>
<line x1="12" y1="8" x2="12.01" y2="8"/>
</svg>
);
}
SVG Preview
Frequently Asked Questions
Related Tools
JSON Formatter
Format, validate, and minify JSON data with syntax highlighting.
Base64 Encoder / Decoder
Encode text to Base64 or decode Base64 strings back to plain text.
Regex Tester
Test and debug regular expressions in real-time. Matches highlighted, capture groups, replacements.
CSV to JSON Converter
Convert CSV data to JSON arrays and JSON arrays back to CSV. Custom delimiters supported.
Text Diff Checker
Compare two texts and see additions, removals, and unchanged lines highlighted side by side.
Image to Base64 Converter
Convert images to Base64 encoded strings and data URIs. Supports PNG, JPEG, GIF, WebP, and SVG. No upload, fully private.