ngx-fast-svg

Feature

Sizing

One input for square icons, two for everything else. Dimensions are applied before the file arrives, so nothing shifts.

size="16"
size="24"
size="48"
width="52" height="71"
no input: defaultSize (24)
template
<fast-svg name="play" size="16" />
<fast-svg name="play" size="24" />
<fast-svg name="play" size="48" />

<!-- non-square: width and height -->
<fast-svg name="logo" width="52" height="71" />

<!-- no input: uses defaultSize -->
<fast-svg name="search" />

Rules

  • width = width || size
  • height = height || width || size
  • size falls back to the defaultSize option, so an icon always has dimensions.

The values are written as attributes on the rendered <svg>. Pair them with a viewBox in the file so the drawing scales to the box.

app.config.ts
provideFastSVG({
  url: (name) => `assets/svg-icons/${name}.svg`,
  defaultSize: '32', // used when a component sets no size
});