How I Used AI to Rescue My Angular Icon Library From Legacy Technical Debt

When I built ngx-heroicons, an Angular wrapper for Tailwind Labs’ Heroicons set, I went with what felt like a smart, performance-focused choice at the time: the SVG <symbol> and <use> elements (a pattern Sara Soueidan covers well in her guide to structuring and referencing SVG).

The idea was simple: a runtime sprite renderer — a single component that points a <use href="...svg#id"> element at an external SVG file. It felt efficient at the time, but the architecture has two limitations baked in that no amount of code cleanup can fix:

• It fetches at runtime. Every <use href="external.svg#id"> triggers a network request, and the icon is empty until that file loads. That's a flash-of-missing-icon on every cold render.
• It doesn’t render under SSR/hydration. External sprite references don’t resolve server-side, so the icon is blank in the server output. For anything with SSR this is a real problem.

The Modern Vision

I knew exactly what the library needed to become: a collection of fully tree-shakable, secure, standalone Angular components.

But then I looked at the sheer volume of work. Heroicons has hundreds of icons, each split across multiple styles: Outline, Solid, Mini, and Micro.

Manually copy-pasting hundreds of SVGs, stripping out hardcoded strokes, adding ChangeDetectionStrategy.OnPush, wrapping them in Angular component decorators, and setting up the public API exports would have taken days of mind-numbing work. Even writing a custom Node.js regex script to parse the files usually turns into a multi-day debugging cycle when a stray XML attribute throws off your script.

This is where I decided to hand the heavy lifting over to AI.

Enter AI: Building the Automation Pipeline

Instead of asking an LLM to generate components one by one, I used it to design an end-to-end build-and-migration script. I fed the AI samples of the raw Heroicons SVG files alongside the exact schema of a modern Angular 18+ standalone component.

We spent a few evolutionary prompts refining a TypeScript parsing pipeline. The AI helped me write a script that does the following automatically:

1. Clones and Reads: Pulls the raw source SVGs straight from the official Tailwind Heroicons repository.
2. Cleans and Sanitizes: Automatically strips out hardcoded stroke, fill, and dimension attributes, swapping them with currentColor and leveraging dynamic input bindings. This ensures the icons respond natively to standard CSS and Tailwind utilities.
3. Generates Components: Wraps each path into a clean, modern Angular standalone component file using OnPush change detection for maximum performance.
4. Builds the Barrel Exports: Automatically writes the public-api.ts maps so developers can cleanly destructure exactly what they need.

Whenever the script choked on a quirky SVG path or an unexpected self-closing tag, I just pasted the error back to the AI. It immediately identified the edge case in the parsing logic and refactored the script. Within a few hours, the automation pipeline reliably generated hundreds of consistent, optimized Angular components.

What the New ngx-heroicons Looks Like

Thanks to this automated rebuild, the developer experience for ngx-heroicons is night and day compared to the legacy version.

Now, using an icon is completely seamless. You simply import the specific icons you need directly into your component’s imports array:

import { Component } from '@angular/core';
import { AcademicCapOutlineIcon, BeakerSolidIcon } from '@ploutarchosm/ngx-heroicons';

@Component({
  selector: 'app-demo',
  imports: [AcademicCapOutlineIcon, BeakerSolidIcon],
  template: `
    <!-- decorative: hidden from screen readers automatically -->
    <pms-academic-cap-outline-icon />

    <!-- meaningful: pass a label -> role="img" + aria-label -->
    <pms-beaker-solid-icon [size]="32" label="Lab results" />
  `,
})
export class DemoComponent {}

Why this rules:

• 100% Tree-Shakable: Because each icon is a separate ES-module export and the package is marked "sideEffects": false, the bundler statically detects which icons you import. Everything you don't use is dropped from the production build.
• Completely Secure: Zero risk of XSS, no DomSanitizer calls, and total harmony with strict Content Security Policies.
• Direct CSS Control: Classes pass right through to the underlying SVG, allowing you to manipulate sizes, strokes, animations, and hover states instantly via CSS or Tailwind.

The one thing the old sprite approach won on was raw DOM node count when rendering thousands of icon instances at once — but for a typical app, that’s a non-issue.

Final Thoughts

As maintainers, we often let legacy code sit around because the sheer physical friction of a massive manual rewrite feels exhausting. This project completely shifted my perspective.

AI shouldn’t just be used for writing boilerplate code or generating text; it is an incredible tool for data transformation and refactoring legacy architectures. It allowed me to take a messy, outdated asset management strategy and flip it into a modern, secure, type-safe Angular library in a single afternoon.

If you are currently maintaining an older library or application dealing with legacy SVG implementations, I highly recommend building an automated AI pipeline to do the heavy lifting for you.

Check out the updated repository here: ngx-heroicons on GitHub. I’d love to hear your thoughts or see your contributions!