ngx-fast-svg

Feature

SSR and hydration

These icons were fetched while this page was prerendered and shipped inside the HTML. The client hydrates the cache instead of requesting them again.

Check it yourself

Open this page's source (not the devtools DOM): the HTML ends with <div id="svg-cache"> holding every icon above. Reload with the network panel open: no .svg request is made for them.

app.config.server.ts
@Injectable()
export class HttpSvgLoadStrategy implements SvgLoadStrategy {
  private readonly http = inject(HttpClient);

  config(url: string) {
    return of(url);
  }

  load(url$: Observable<string>) {
    return url$.pipe(
      switchMap((url) => this.http.get(url, { responseType: 'text' }))
    );
  }
}

export const config = mergeApplicationConfig(appConfig, {
  providers: [
    provideServerRendering(withRoutes(serverRoutes)),
    provideFastSVG({
      url: (name) => `assets/svg-icons/${name}.svg`,
      svgLoadStrategy: HttpSvgLoadStrategy,
    }),
  ],
});
app.config.ts
provideClientHydration(
  // The SVGs are already in <div id="svg-cache">; don't send them
  // a second time through the HTTP transfer cache.
  withHttpTransferCacheOptions({
    filter: (req) => !req.url.includes('svg-icons/'),
  })
);