It was 4:30 PM on a Friday. The deployment pipeline for our iOS app turned bright red. The error? `Main bundle too large`. We scrambled. Did someone add a massive library? Did we accidentally bundle a video file? The culprit was much smaller, and much sneakier.

No. It was a "Close" icon. A designer had exported it from Illustrator with "Preserve Illustrator Capabilities" checked. That specific SVG was 400KB of metadata, embedded thumbnails, custom font definitions, and base64 junk strings. It was one icon, but it was the straw that broke the bundle size limit.

Icons Are Code, Not Images

This incident forced us to rethink our relationship with design assets. We realized that in a modern web application, an icon isn't an image. It is code. It is a React component. It is a function that returns a JSX Element. Treat it with the same respect you treat your logic.

Bad SVG vs Good SVG

Lets look at the anatomy of the crime. Here is what the "Bad SVG" looked like (abbreviated):

<!-- BAD SVG -->
<svg xmlns:x="adobe:ns:meta/" width="24" height="24">
  <metadata>...</metadata>
  <g id="Layer_1" data-name="Layer 1">
    <g>
      <image width="500" height="500" href="data:image/png;base64,..." />
    </g>
  </g>
</svg>

And here is what it *should* have been:

<!-- GOOD SVG -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M18 6L6 18M6 6l12 12" />
</svg>

The difference involves file size, render speed, and scalability. The first one is rigid; the second is fluid.

The Pipeline

We built a strict pipeline that every icon must pass through before entering our codebase:

• The Purge: Automated removal of all `xml`, `doctype`, and `metadata` tags.
• The Precision Cut: Rounding all coordinates to 2 decimal places.
• The Componentization: Wrapping the raw SVG in a `forwardRef` functional component.

Tree Shaking & Barrels

Another common mistake is importing a massive library (like all of Font Awesome) just to use two icons. If your bundler isn't configured correctly, you ship 5,000 icons to the user. We recommend using specific imports:

// Bad
import { Icon } from "massive-library";

// Good
import { IconHome } from "massive-library/home";

Accessibility (ARIA)

An icon without a label is invisible to a screen reader. Or worse, it is read as "unlabeled graphic." Your generated components must have a way to accept `aria-label` or `title` props.