SVG to JSX / React Component
Convert SVG markup into a React component: camelCase attributes, style objects and props spread on the svg.
Runs in your browser Your input never leaves your device.
Report a problem with this tool
About this tool
Paste an SVG file or the markup of an icon and get JSX that React accepts. Attributes with hyphens become camelCase (stroke-width becomes strokeWidth, fill-rule becomes fillRule, clip-path becomes clipPath), class becomes className, xlink:href becomes xlinkHref, xmlns:xlink becomes xmlnsXlink, and style strings become objects. The xml declaration and the doctype are removed. Tick Wrap in a component to get a function, with {...props} on the svg element so you can set size, colour and class from outside, and optionally typed for TypeScript. Remove width and height if you want the icon to follow the size of its container. We tested the converter by turning SVGs with gradients, clip paths, links and styles into JSX, rendering them with React and comparing the markup with the original: they matched. This is a simple converter and not a replacement for SVGO, so optimise a large SVG first with the SVG optimizer. Everything is processed in your browser and nothing is uploaded.
How to use it
- Paste your SVG.
- Choose whether to make a component, add TypeScript types and keep the props spread.
- Copy the code into your project.
Common problems
- The icon ignores my colour
- If the SVG has a fixed fill or stroke colour, replace it with currentColor so that it follows the text colour.
- The icon has a fixed size
- Tick the option to remove width and height, and set the size with CSS or props.
- An attribute was dropped
- Attributes React does not accept, such as inline event handlers, are removed and listed in the notes at the end.