What Changes When Converting SVG to React Components (JSX & TSX)

TL;DR SVG attributes like stroke-width become strokeWidth in JSX. class → className . Numeric values become {expressions} . Inline styles become objects. xmlns and XML comments are removed. The converter outputs either JSX or TSX with SVGProps . Use automation (SVGR or SVGCode) for large icon sets. Import only what you need to keep bundle sizes small. Converting an SVG file into a React component is more than just pasting markup into a .jsx or .tsx file. React uses JSX, which is stricter than HTML/XML and requires specific changes to ensure your SVG renders correctly and remains maintainable. In this post, we’ll explore every transformation that takes place—from attribute casing to TypeScript typing—so you understand exactly what our free SVG to React converter does under the hood. What Actually Changes? Kebab‑case Attributes Become camelCase SVG uses attributes like stroke-width , fill-rule , and clip-path . JSX requires property names that are valid JavaScript identifiers, so these become: SVG Attribute React JSX stroke-width strokeWidth stroke-linecap strokeLinecap stroke-linejoin strokeLinejoin fill-rule fillRule clip-path clipPath font-size fontSize stroke-dasharray strokeDasharray class Becomes className In SVG you write class="icon" , but in JSX you must use className="icon" because class is a reserved word in JavaScript. Numeric Attributes Are Converted to Expressions React treats string values differently from numbers. For numeric SVG attributes like width , height , x , y , cx , r , etc., the converter outputs {value} instead of "value" . <circle cx="12" cy="12" r="10" /> becomes: < circle cx = { 12 } cy = { 12 } r = { 10 } /> Inline Styles Become Objects If your SVG uses style="fill: red; stroke: blue;" , it must be converted to a JavaScript object: style = {{ fill : ' red ' , stroke : ' blue ' }} xmlns and Namespace Declarations Are Removed React automatically uses the correct SVG namespace, so xmlns and other XML namespace declarations are unnecessary a