SVG to JSX Converter

Convert SVG markup into a React functional component with camelCase attributes and props spread.

SVG Input

React Component Output

import React from 'react';

const MyIcon = (props) => (
  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/>
    <line x1="12" y1="8" x2="12" y2="16"/>
    <line x1="8" y1="12" x2="16" y2="12"/>
  </svg>
);

export default MyIcon;

When using SVG icons in React, you need to convert SVG attributes to their JSX equivalents. Hyphenated attributes like stroke-width become strokeWidth, and fill-rule becomes fillRule. This converter wraps the SVG in a reusable React functional component and spreads props onto the root svg element for easy customization.

Frequently Asked Questions

: Hyphenated SVG attributes like stroke-width, fill-rule, clip-path are converted to camelCase JSX equivalents (strokeWidth, fillRule, clipPath).

SVG to JSX Converter

Frequently Asked Questions

Related Tools