SVG to React Component
Convert an SVG icon into a React component that takes props.
About SVG to React
An SVG icon in a React project works best as a component. A component takes props, so a caller can set the size, the color, and a click handler. This tool converts SVG markup into such a component.
The tool renames each attribute for JSX. stroke-width becomes strokeWidth, fill-rule becomes fillRule, and viewbox keeps the name viewBox. It turns an inline style into an object. With Spread props on, the component takes props and spreads them on the root svg tag.
Paste an SVG from an icon set or from a design export, then set the component name. Copy the result into a .jsx or .tsx file. Set fill or stroke to currentColor in the SVG, so the icon takes the text color of its parent.
Every conversion runs in your browser. To get a Vue template or a Vue SFC, change the target in the HTML & SVG to JSX / Vue tool.