icons as components
Why an SVG cannot be pasted into JSX as-is
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
How to convert an SVG to a React component
Drop the SVG
Pick a .svg file — it stays on your device.
Copy the block you need
A full component, its TypeScript twin, or the bare JSX.
Drop it in your project
Import it like any other component and style it with props.