SVG TO JSX

Convert SVG to React JSX/TSX, Vue SFC, or Preact. Attribute normalization, currentColor, SVGO optimization.

COMPONENT

SVG INPUT

Upload .svg

REACT TSX OUTPUT

Paste SVG input to see the converted component

OPTIONS

Memo wrap Wrap with React.memo() to prevent unnecessary re-renders Forward ref Use React.forwardRef to expose the SVG DOM node currentColor Replace hardcoded fill/stroke colors with currentColor for CSS theming SVGO optimization Run SVGO to clean up and compress the SVG before converting Accessibility props Add title/description props with aria-labelledby for screen readers

What gets converted

class → className
stroke-width → strokeWidth
fill-rule → fillRule
xlink:href → href
All SVG hyphenated attrs → camelCase
Comments & XML declarations removed
{...props} spread added to root

Output formats

JSX — React component with PropTypes
TSX — Typed with React.SVGProps<SVGSVGElement>
Vue SFC — Template + script setup, v-bind="$attrs"
Preact — Preact/compat import, JSX.SVGAttributes

Related tools

SVG Optimizer — Compress before converting
JSON to TypeScript — Type generation