# 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`:

```json
{
  "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

```ts
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). |

```html
<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:

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