SVG → React
Paste-ready JSX from any SVG file — attributes renamed the way React wants them, props spread onto the root, TypeScript if you need it.
or click to browse — SVG only
The component name comes from the file name, so arrow-left.svg becomes ArrowLeft.
Same component, typed as SVGProps<SVGSVGElement>.
Just the markup, for pasting inside a component you already have.
icons as components
JSX looks like markup but it is JavaScript. Hyphenated attributes such as stroke-width are not valid identifiers, class collides with a reserved word, and curly braces inside an inline style block are read as expressions. An SVG copied straight from a design tool usually fails to compile for at least one of those reasons.
This converter renames what has to be renamed and leaves everything else alone. data- and aria- attributes keep their hyphens, because React passes those through untouched — renaming them is a common way to silently lose an accessible label.
three steps
Pick a .svg file — it stays on your device.
A full component, its TypeScript twin, or the bare JSX.
Import it like any other component and style it with props.
quick answers
So that anything you pass in wins. In JSX a later attribute overrides an earlier one, so with the spread last you can set className, width or an onClick from the outside. Put it first and the values baked into the file would quietly override yours.
Replace the hard-coded fill or stroke in the output with currentColor, then set the colour in CSS on any parent element. If the file has colours scattered across many nodes, run it through the SVG color changer first — it can switch every one of them to currentColor in one go.
Not directly. React Native has no DOM, so SVG there needs react-native-svg and capitalised element names such as Svg and Path. The attribute renaming shown here is still the right shape, but the imports and tags are different.
That is the source file — minified SVG stays minified, because reformatting is a separate job. Run it through the SVG beautifier first and the component comes out with readable indentation.
No. The conversion is plain string work done in your browser.