SVG to React/JSX Component Converter
Convert SVG into React/JSX components. Auto kebab-case → camelCase attributes, TypeScript types, currentColor, size/color props.
Convert SVG (raw XML or Figma export) into a React/JSX component. Changes kebab-case attributes to camelCase, escapes <style>, optional TypeScript types.
When to convert SVG → JSX
- From Figma exports: designer exports SVG → you paste it into a React component.
- Custom icon libraries: instead of react-icons, build your own from Heroicons / Tabler.
- Logos + illustrations: brand SVGs → components with size/color props.
- Animation: convert to JSX so state can drive attributes.
SVG vs JSX differences
- kebab-case → camelCase:
stroke-width→strokeWidth,fill-rule→fillRule. - class → className (JSX rule for HTML/SVG elements).
- style: CSS string → object:
style="color:red"→style={{color: 'red'}}. - <style> tags: wrap the CSS in a backtick expression so it isn't parsed:
<style>{`...`}</style>. - viewBox: STAYS camelCase (it isn't
view-box).
Props pattern tips
- size prop: width/height take props for easy resizing. Default 24.
- currentColor: use
fill="currentColor"so icons inherit the parent'scolor— change color viaclassName="text-red-500". - ...props spread: lets consumers pass
onClick,aria-label, etc. - TypeScript: extend
React.SVGProps<SVGSVGElement>for full type safety.
Who this is for
Fullstack/backend/devops engineers — debug JWT, format JSON/SQL, parse cURL, compute CIDR subnets, draft Mermaid diagrams, write conventional commits… Daily toolkit alongside your terminal and editor.
FAQ
Is my pasted code/token sent anywhere?
No. All TopDev dev tools run 100% client-side — JWT, SQL, JSON, cURL, regex… process in-browser. Disconnect to verify. Safe for internal tokens, production DB queries, API keys.
Does it work offline / install as a PWA?
Tools work offline after the first load. Installable PWA is on the roadmap — for now you can bookmark and use without internet.
Related tools
See all tools →JWT Decoder
Decode JWT tokens — header, payload, claims with readable timestamps.
NEWText Diff
Paste 2 texts → highlight diffs at word/line/char level. Great for diffing AI outputs.
NEWJSON Schema Generator
Generate JSON Schema (Draft-07) from a sample — for LLM structured output and API validation.
NEWJSON Formatter
Format / minify / validate JSON. Sort keys A-Z, custom indent, Ctrl+Enter shortcut.