Why Figma SVGs Break Your React App

You just designed a beautiful icon in Figma. You right-click, "Copy as SVG", paste it into your React component... and it's a disaster. The colors are hardcoded, the `viewBox` is missing, and the file size is huge.

The Problem: "Drawing" vs "Coding"

Figma is a design tool, not a code generator. When it exports SVG, it prioritizes visual accuracy over code cleanliness. This results in:

• Hardcoded Fills: `fill="#1E1E1E"` prevents you from using Tailwind classes like `text-red-500`.
• Useless Groups: Dozens of `<g>` tags that do nothing but bloat the DOM.
• Weird ViewBoxes: Instead of `0 0 24 24`, you get `0 0 24.0001 23.999`.

The Manual Fix (Painful)

Usually, developers fix this by manually deleting props, changing `fill` to `currentColor`, and running it through SVGO. This takes about 3-5 minutes per icon. If you have 20 icons, that's an hour of wasted time.

Best Practices for React SVGs

1. Always use `currentColor` for fills/strokes to control color via CSS.
2. Remove `width` and `height` attributes and control sizing via the parent container.
3. Use a standard `viewBox` (like 24x24) for consistency.