ngx-fast-svg

Feature

Suspense placeholder

Until an icon's file is parsed, the component renders the suspense SVG in the final box. This page adds 1.5 s of latency to every fetch so you can watch it.

Each run uses fresh names, so the icons are never served from the cache.

Press "Load icons".

Icon requests0

No icon requested yet.

What you see

  1. The dashed ring is this site's suspenseSvgString. It is parsed once and referenced as <use href="#suspense">.
  2. When the file arrives, the registry appends it to the cache and the href flips to #name. The box never changes size.
app.config.ts
export const suspenseSvg = `
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" opacity="0.45">
    <circle cx="12" cy="12" r="9" stroke-dasharray="4 4" />
  </svg>`;

provideFastSVG({
  url: (name) => `assets/svg-icons/${name}.svg`,
  suspenseSvgString: suspenseSvg,
});