Loading page content
Convert raw SVG markup into JSX that React will actually accept: hyphenated attributes camelCased, inline styles turned into objects, and class rewritten to className.
Convert SVG markup to React JSX/TSX components. Transforms attributes to camelCase, converts inline styles to objects, and wraps in a properly typed component with props spreading.
Paste SVG markup on the left to see the React component...
Transformations applied: class to className, kebab-case to camelCase attributes, inline style strings to JS objects, xlink:href to xlinkHref, props spreading on root SVG element.
React's JSX is not HTML, and SVG exposes the difference more than anything else. stroke-width becomes strokeWidth, class becomes className, style must be an object rather than a string, and every tag has to be explicitly self-closed. Doing this by hand on an icon with thirty attributes is tedious and error-prone in a way that produces silent rendering failures rather than errors.
Once converted, strip what you do not need. Design tools emit width, height, and fill attributes baked in; removing them and setting fill to currentColor lets the icon inherit color and size from CSS, which is what you almost always want in a component.