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

When converting SVG files to React components using JSX or TSX, several key changes occur. SVG attributes like stroke-width become strokeWidth in JSX, and class becomes className because class is a reserved word in JavaScript. Numeric SVG attributes are converted to expressions, such as cx = {12} instead of cx=12. Inline styles written in SVG must be converted into JavaScript objects, like style = {fill: "red", stroke: "blue"}.

The converter removes xmlns and XML namespace declarations, as React automatically handles the SVG namespace. Comments and XML declarations are also stripped since they are not valid in JSX. The converter outputs either JSX or TSX, with the same transformations applied but with TypeScript definitions added in TSX. JSX imports only the component itself, while TSX imports the component and the SVGProps type for autocomplete and type checking.

The converter spreads props onto the root <svg> tag, allowing props to override attributes. This conversion process enables the use of React’s strict JSX syntax and TypeScript typing, making SVG components maintainable and scalable. Tools like SVGR and SVGCode automate the process for large icon sets, and best practices suggest importing only the necessary components to keep bundle sizes small.