Helper Pages Script

The generate-helper-pages.js script builds a tiny static website from the output of the AWS icon processing pipeline. This helper site allows visual Browse, dark-mode previews, and instant SVG copying with zero dependencies.

Overview

  • Builds one HTML page per top-level category in aws-icons/.
  • Creates a landing index with visual tiles and icon thumbnails.
  • Supports light/dark detection and dark-icon rendering.
  • Includes click-to-copy clipboard logic for every icon.
  • Uses inline SVG for performance and portability.

Input and Output

The script consumes the aws-icons/ directory and produces a full static preview under aws-svg-helper/. Each category (e.g., Compute, Networking) gets its own page, and the homepage shows a tile for each. 

aws-svg-helper/
├── index.html
├── Compute.html
├── Security.html
└── ...

Representative Thumbnails

Each tile on the homepage uses a representative SVG. These are pulled from Categories/ when available, or matched heuristically using name tokens. If no match is found, a cloud logo or fallback glyph is substituted. 

const hit = icons.find(f => basename(f, ".svg") === cat)
         || icons.find(f => tokenMatch(cat, basename(f, ".svg")));

Dark Mode Handling

Icons with "dark" in their name or path are rendered with a darker background and border. This ensures visibility on light/dark themes and preserves fidelity for AWS-provided dark assets. 

const isDarkName = (name) => /dark/i.test(name);
const divClass = `icon${dark ? " dark" : ""}`;

Background contrast is added with CSS rather than modifying the SVG contents.

Clipboard Interactivity

Clicking any icon copies its raw inline SVG to the clipboard. A quick flash of green confirms the action without leaving the page. This is ideal for dev/design use. 

el.addEventListener("click", () => {
  const svg = el.querySelector("svg").outerHTML;
  navigator.clipboard.writeText(svg).then(() => {
    el.style.background = "#c8e6c9";
    setTimeout(() => el.style.background = "", 350);
  });
});

Command-Line Usage

  • --source – source folder (default: aws-icons)
  • --dest – output folder (default: aws-svg-helper)
  • --dry-run – print actions but don’t write files

Once complete, you can open aws-svg-helper/index.html in any browser and immediately begin exploring your optimized AWS icon library.