Convert SVG to React component

No. The conversion runs entirely in your browser. The file never leaves your device – there is no server that could see it. Once the page has loaded, the tool even works offline.

Save the file next to your code and import it: import MyIcon from "./MyIcon"; Everything you pass to the component goes to the <svg> element, so <MyIcon className="h-6 w-6" aria-hidden="true" /> works as expected. The component is named after the file, in PascalCase.

Attributes are renamed to their JSX form (stroke-width → strokeWidth, class → className, xlink:href → xlinkHref), inline styles become style objects, and the XML prolog, comments and DOCTYPE are dropped. Unless you switch off “Optimise first”, the SVG is also run through the same optimiser as “Optimise SVG”, which shortens the code noticeably.

Scripts, event handlers, external images and style sheets are removed before the component is generated – you never ship untrusted code by accident.

By default you get a .tsx file whose props are typed as SVGProps<SVGSVGElement>. Switch off “TypeScript” for a plain .jsx file without types.