SVG to React Component

Convert SVG code into a reusable React component

Component Name

Use TypeScript (.tsx)

Add common props (width, height, color)

Use arrow function

SVG Input

React Component

import { SVGProps } from 'react';

interface Props extends SVGProps<SVGSVGElement> {
  width?: number | string;
  height?: number | string;
  fill?: string;
  stroke?: string;
}

export default function ({
  width = 24,
  height = 24,
  fill = "none",
  stroke = "currentColor",
  ...props
}: Props) {
  return (
    <svg width={width} height={height} viewBox="0 0 24 24" fill={fill} xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M5 12H19M12 5L19 12L12 19" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

About This Tool

This tool converts SVG code into reusable React components with support for TypeScript, props, and different function styles.

Features:

SVG conversion: Transforms any valid SVG into a React component
TypeScript support: Generates properly typed components with interfaces for props
Customization: Configure component name, props, and function style
Attribute conversion: Automatically converts HTML attributes to JSX format (kebab-case to camelCase)
Styling support: Handles inline styles and converts them to React style objects
Best practices: Creates components following React best practices

All processing happens in your browser - your code is never sent to any server.

DevTools

SVG to React Component

JSON Formatter

JSON to XML

JSON to ENV

JSON Query Explorer

CSV Viewer

URL Encoder

URL to QR Code

Base64 Encoder/Decoder

Base64 to File

Base64 to HEX

SVG to React Component

Color Converter

Convert SVG code into a reusable React component

SVG Input

React Component

About This Tool