Using SVGs in React (SVG to JSX)

SVGs (Scalable Vector Graphics) are incredible. Because they are defined using math and XML rather than pixels, they can scale to any size without losing quality, making them perfect for icons and logos.

The React Problem

If you download an SVG icon from a design tool like Figma or Illustrator and try to paste it directly into a React component, your app will immediately crash. 💥

Why? Because React uses JSX, and JSX has strict rules that standard HTML/XML does not:

1. Attributes Must Be CamelCase: Attributes like fill-rule must become fillRule, and stroke-width must become strokeWidth.
2. Class to ClassName: The class attribute must be renamed to className.
3. Self-Closing Tags: Tags like <path> must be explicitly self-closed as <path />.

Automating the Conversion

Manually editing 50 SVG attributes is tedious and error-prone. An SVG to JSX converter parses the raw XML, applies all the React-specific transformations, and outputs a perfectly clean, ready-to-use React functional component!