# theme/runtime-icons (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/theme/runtime-icons.ts](https://github.com/Tahul/zidane/blob/main/ui/src/theme/runtime-icons.ts).

## Functions

### `watchRuntimeIcons`

Function.

Draws the `i-ph-*` icon classes no stylesheet styles, as they appear under `root` (see the module
comment). Call it once, at startup.

```ts
function watchRuntimeIcons(options: RuntimeIconsOptions): () => void
```

**Parameters**

- `options` (`RuntimeIconsOptions`): The collection's loader, and the element to watch.

**Returns** `() => void`: Stops watching. The rules already added stay.

Source: [ui/src/theme/runtime-icons.ts:82](https://github.com/Tahul/zidane/blob/main/ui/src/theme/runtime-icons.ts#L82)

## Interfaces

### `IconCollection`

Interface.

An Iconify collection, as `@iconify-json/<prefix>/icons.json` holds it.

```ts
interface IconCollection
```

**Properties**

- `aliases?` (`Readonly<Record<string, { parent: string }>>`): Other names of its icons.
- `height?` (`number`): The default height of its icons.
- `icons` (`Readonly<Record<string, { body: string; height?: number; width?: number }>>`): Its icons, by name: each one's SVG body.
- `width?` (`number`): The default width of its icons.

Source: [ui/src/theme/runtime-icons.ts:15](https://github.com/Tahul/zidane/blob/main/ui/src/theme/runtime-icons.ts#L15)

### `RuntimeIconsOptions`

Interface.

Options of [`watchRuntimeIcons`](https://zidane.si/docs/reference/ui-theme-runtime-icons.md#watchRuntimeIcons).

```ts
interface RuntimeIconsOptions
```

**Properties**

- `loadPhosphor` (`() => Promise<IconCollection>`): Loads the Phosphor collection (`@iconify-json/ph`'s `icons.json`), transformed as the app's Uno
  config transforms it (`crispPhosphor`), so a runtime icon looks like a built one.
- `root?` (`Element`): The element to watch. Default: the document's root element.

Source: [ui/src/theme/runtime-icons.ts:27](https://github.com/Tahul/zidane/blob/main/ui/src/theme/runtime-icons.ts#L27)