HESTIA UI Components

Install

npm install @hestia-earth/ui-components

SVG icons

Icons are rendered from a single SVG sprite (icons-sprite.svg) via the standalone HESvgIconComponent (selector he-svg-icon).

1. Serve the sprite as an asset

The component references the sprite as an external file — <use href="…/assets/svg-icons/icons-sprite.svg#id"> — so icons render in prerendered / SSR HTML without any JavaScript. The consuming app must copy the sprite (shipped in the package) to assets/svg-icons/. In angular.json, add it to the build target's assets:

{
  "glob": "**/*",
  "input": "./node_modules/@hestia-earth/ui-components/svg-icons/",
  "output": "/assets/svg-icons"
}

The reference is resolved against the document's <base href>, so deep routes and sub-path deploys work without extra configuration. No app initializer is required.

2. Use the component

import { HESvgIconComponent } from '@hestia-earth/ui-components';

@Component({
  imports: [HESvgIconComponent],
  template: `<he-svg-icon name="chevron-down" />`
})

| Input | Type | Default | Description | | ----------- | --------------- | ------- | ------------------------------------------------------------------ | | name | svgIconNames | — | Required. Icon id (see icons / svgIconNames in ./icons). | | size | svgIconSizes | '20' | One of '16' \| '20' \| '24' \| '40' \| '48' (px). | | animation | string | — | Set to 'spin' for a continuous rotation (e.g. loading spinners). |

<he-svg-icon name="info-circle" size="16" />
<he-svg-icon name="spinner" animation="spin" />

3. Colour

Icon paths use fill="currentColor", so an icon takes the CSS color of its context — set it on the element or an ancestor:

<span class="has-text-danger"><he-svg-icon name="private-lock" /></span>