UI kit reference

theme/runtime-icons

import { … } from 'zidane-ui'ui/src/theme/runtime-icons.ts

Functions#

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

TypeScript

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

Parameters
Name	Type	Description
options	`RuntimeIconsOptions`	The collection's loader, and the element to watch.

() => void

Stops watching. The rules already added stay.

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

TypeScript

interface IconCollection

IconCollection properties
Name	Type	Description
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.

TypeScript

interface RuntimeIconsOptions

RuntimeIconsOptions properties
Name	Type	Description
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.