About this tool
The SVG to JSX Component tool converts raw SVG markup into a clean React component, the way SVGR does, but entirely in your browser with nothing uploaded. Paste an icon exported from a design tool and get a component you can import and style. It parses the SVG with DOMParser and reports a clear error if the markup is malformed.
Every hyphenated or namespaced SVG attribute is camelCased to its React name — stroke-width to strokeWidth, fill-rule to fillRule, clip-path to clipPath, stop-color to stopColor, xlink:href to xlinkHref, xmlns:xlink to xmlnsXlink — while data-* and aria-* attributes are left as-is. Inline style strings become style objects, empty elements like path and circle are self-closed, and props are spread onto the root <svg {...props}> so the component stays configurable. Optional toggles let you replace hard-coded fill and stroke values with currentColor (so the icon inherits text color), strip the width and height so it scales to its container, and wrap the component with forwardRef to expose the underlying <svg> node.
Pick JavaScript or TypeScript output: the TypeScript variant types props as React.SVGProps<SVGSVGElement> and, with forwardRef enabled, uses forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. The component is emitted as an exported arrow function (export const Icon = (props) => (...)), with your chosen name and indent, ready to paste into an icon module.