SVG to JSX component

Turn an SVG into a typed React component that forwards props, with hard-coded fills swapped for currentColor so the icon takes the text color.

xml
React componenttsx
The result appears here

Questions

Why currentColor?+

Because an icon should take the color of the text beside it. With fill and stroke set to currentColor, text-muted-foreground on a parent tints the icon too, and one component covers every place it appears.

What does forwarding props give me?+

The spread on the root svg lets a caller pass className, width, aria-hidden or an onClick without the component having to declare each one. It is the same shape lucide and every icon set use.

Is viewBox preserved?+

Yes. The SVG is read with the XML parser rather than the HTML one, which is what keeps camelCased attributes such as viewBox, strokeWidth and preserveAspectRatio intact.

Related tools

HTML to JSXPaste HTML and get JSX React accepts: class becomes className, inline styles become objects, comments and void elements are handled.CSS to JS objectConvert CSS rules or a bare declaration list into JavaScript style objects, camelCased and quoted, ready for a style prop or a CSS-in-JS file.CSV to JSONRead a CSV into JSON records, including quoted fields holding separators or line breaks, with numbers and booleans converted or kept as text.

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

Browse the blocks

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version