Loading...
Convert SVG files into React components
A powerful tool for converting SVG files or markup into ready-to-use React components. Supports TypeScript, multiple frameworks, and automatic prop spreading.
The SVG to JSX converter transforms raw SVG markup into React component code. It handles all the necessary transformations to make SVGs compatible with React's JSX syntax, including attribute conversions and prop spreading.
Tip: Use the "Load Example" button to see a sample conversion and understand how the tool works.
The tool supports multiple ways to provide SVG input, making it easy to get started regardless of your workflow.
Drag your SVG file from your computer and drop it onto the upload area. The dashed border will highlight when you're dragging valid files.
Click anywhere on the upload area to open your file browser and select an SVG file manually.
Directly paste SVG markup into the text area. This is useful when you have SVG code from a design tool or another source.
Click "Load Example" to see a sample SVG converted to a React component. Great for testing the tool.
Note: Only SVG files (.svg) are accepted for file upload. The tool will automatically extract the filename to suggest a component name.
Configure the output format to match your project's requirements.
Generates a TypeScript component with proper typing using React.SVGProps interface. Best for TypeScript projects.
export interface IconProps
extends React.SVGProps<SVGSVGElement> {}Generates a plain JavaScript component without TypeScript types. Suitable for JavaScript React projects.
import React from "react";
export default function Icon(props) {
return <svg {...props} />;
}Standard React component with props spread to the SVG element.
Components with separate className handling for Next.js Image component compatibility.
Standard React component compatible with Remix framework.
Fine-tune how the SVG is converted to a React component.
Specify the name for your React component. Only alphanumeric characters are allowed; special characters are automatically removed.
The filename used when downloading the generated component. This can differ from the component name if needed.
Toggle whether to remove the viewBox attribute from the SVG. Use this when you want to control sizing entirely through width and height props.
When to remove viewBox: If you need fixed-size icons that don't scale, or when using the component with a parent that controls dimensions.
Review your converted SVG and export the generated component code.
Shows a live preview of the original SVG as it will appear in the browser. This helps you verify the SVG renders correctly before conversion.
Displays the complete React component code. You can:
Copies the generated code directly to your clipboard. Shows a confirmation toast when successful.
Downloads the generated component as a .tsx or .jsx file with your specified filename.
Example outputs for different frameworks and use cases.
import * as React from "react";
export interface IconProps extends React.SVGProps<SVGSVGElement> {}
export default function Icon(props: IconProps) {
return (
<svg {...props} />
);
}import * as React from "react";
export interface IconProps extends React.SVGProps<SVGSVGElement> {}
export default function Icon({ className, ...props }: IconProps) {
return (
<svg className={className} {...props} />
);
}Next.js mode separates className from other props for better compatibility with Next.js Image component and CSS frameworks.
import React from "react";
export default function Icon(props) {
return (
<svg {...props} />
);
}Convert SVG icons from design tools into reusable React icon components. The tool handles all attribute conversions including className and aria attributes.
Batch convert SVG assets into a design system's icon library. Use consistent naming conventions for easy integration.
Create SVG icon components for UI libraries. The TypeScript output provides proper typing for better developer experience.
Convert brand logos and illustrations into React components that can be styled with CSS and animated with React.
Create SVGs that accept props for interactive behavior. Pass onClick handlers, aria labels, and custom styles dynamically.
Generate Next.js compatible icon components with proper className handling for Tailwind CSS integration.
Preserved Attributes: The following attributes are preserved as-is without camelCase conversion: data-*, aria-*, viewBox, preserveAspectRatio, xmlns, role, and id.
Style Conversion: The style attribute is converted from CSS string format to a JavaScript object with camelCase properties. Numeric values are kept as-is, others are quoted.
Props Spreading: All props are spread onto the SVG element, allowing consumers to pass width, height, onClick, and any other valid SVG attribute.