DevBolt
Processed in your browser. Your data never leaves your device.

How do I convert SVG to a React component?

Paste your SVG and get JSX or a full React/TypeScript component with 80+ attributes converted to camelCase, inline styles as objects, and xmlns stripped. Options include forwardRef, memo, props spread, custom component name, and TypeScript output. See a preview of the SVG. Everything runs in your browser.

Convert SVG attributes to JSX
Input
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path stroke-width="2" fill-opacity="0.5" clip-path="url(#c)" d="M12 2L2 22h20z"/>
</svg>
Output
<svg viewBox="0 0 24 24">
  <path strokeWidth="2" fillOpacity="0.5" clipPath="url(#c)" d="M12 2L2 22h20z"/>
</svg>
← Back to tools

SVG to JSX / React Component Converter

Paste an SVG and get JSX markup or a complete React component. Converts attributes to camelCase, handles style objects, removes XML cruft, and wraps in a component with props/ref support.

Samples:
JSX output will appear here

About SVG to JSX Converter

  • Attribute conversion — converts 80+ SVG attributes from kebab-case to camelCase (stroke-width → strokeWidth, fill-opacity → fillOpacity).
  • Style objects — transforms inline style strings to JSX-compatible style objects.
  • Component wrapping — generates a complete React component with customizable name, props spread, forwardRef, and memo.
  • TypeScript support — outputs typed components with SVGProps interface and optional custom props.
  • Cleanup — removes XML declarations, comments, DOCTYPE, and namespace cruft automatically.
  • Everything runs in your browser — no data is sent over the network.

Tips & Best Practices

Pro Tip

Use React.forwardRef for icon components to support refs

SVG icon components often need refs for tooltips, focus management, and animations. Wrapping your SVG component with React.forwardRef lets parent components attach refs to the underlying SVG element.

Common Pitfall

SVG attributes use camelCase in JSX, not kebab-case

stroke-width becomes strokeWidth, fill-opacity becomes fillOpacity, clip-path becomes clipPath. Missing these conversions causes React warnings and broken rendering. There are 80+ SVG attributes that need camelCase conversion.

Real-World Example

Pass size and color as props for reusable icon components

Instead of hardcoding width/height and fill in your SVG, accept them as props with sensible defaults: `({ size = 24, color = 'currentColor', ...props })`. Using 'currentColor' inherits the parent's text color automatically.

Security Note

Sanitize SVG content before converting — SVGs can contain scripts

SVG files can embed JavaScript via <script> tags, event handlers (onclick, onload), and xlink:href with javascript: URIs. When converting user-uploaded SVGs to React components, strip all script elements and event handler attributes first.

Frequently Asked Questions

How do I convert SVG to JSX for React components?
Paste SVG markup and the converter transforms it into valid JSX: class becomes className, hyphenated attributes become camelCase (stroke-width to strokeWidth, fill-opacity to fillOpacity), inline styles become JavaScript objects, and xmlns is removed. DevBolt optionally wraps output in a named React component with forwardRef support, React.memo for performance, and TypeScript SVGProps typing.
What attributes change when converting SVG to JSX?
SVG attributes like stroke-width, fill-rule, clip-path, and class become strokeWidth, fillRule, clipPath, and className in JSX. The style attribute changes from a CSS string to a JavaScript object. Event handlers become camelCase. The xmlns namespace is removed. Data attributes remain unchanged. These differences cause React warnings or rendering failures if you paste raw SVG into JSX without conversion. DevBolt handles all transformations automatically.
How do I create a reusable React icon component from SVG?
Enable component output and the converter generates a named function component accepting standard SVG props like width, height, fill, and className. Enable forwardRef for ref access and memo for render optimization. The component spreads incoming props onto the root SVG element. For icon libraries, set fill to currentColor so icons inherit parent text color via CSS, working with Tailwind classes like text-blue-500.

Related Convert Tools

0x

Number Base Converter

Convert numbers between binary, octal, decimal, and hex

CSV

CSV ↔ JSON Converter

Convert between CSV and JSON formats with custom delimiters

%20

URL Encoder & Decoder

Encode and decode URLs with encodeURIComponent and encodeURI

YML

JSON ↔ YAML Converter

Convert between JSON and YAML for Kubernetes, Docker, and CI/CD configs