SVG to React
What SVG to React actually does
Pasting raw SVG markup into JSX does not work, because the attribute names differ: stroke-width, clip-path, fill-rule and their neighbours all need the camelCase spelling, and the compiler's error points at the element rather than the attribute. Converting by hand is a rename pass that is easy to do incompletely. This produces a component with the attributes translated and a sensible component name, and leaves the output editable so props, sizing or a className can be added before it goes into a file.
How to use it
- Choose an SVG file.
- Optionally set the component name; otherwise one is derived from the file name.
- Run it and read the component beside the original drawing.
- Edit the JSX if needed, then copy or download it.
Useful for
- Turning a designer's icon export into a component without hand-renaming attributes.
- Getting a logo into a React app as markup rather than an image request.
- Producing a starting point for an icon component that will take size and colour props.
Limits worth knowing
- The output is a plain component. Props for size, colour or title are a manual addition, which is why the result stays editable.
- Ids inside the component are not namespaced, so rendering the same component twice on a page can collide; prefix the ids first if it uses gradients or masks.
- Style attribute contents are carried across as written and may need converting to an object for some setups.
Questions people ask
Why can I not paste SVG straight into JSX?
Because hyphenated SVG attribute names are not valid JSX property names. They have to be renamed to their camelCase spellings.
Will the same icon twice on one page break?
It can, if the file defines ids for gradients, masks or clips. Run the id prefix tool first.
Can I add props to it?
Yes. The output is editable here before you copy it.