UI kit reference

motion/SwapIcon

import { … } from 'zidane-ui'ui/src/motion/SwapIcon.tsx

sizes xs, sm, md, lg

active, danger, disabled

node icon, badge, render as link

IconToggle in a segment

Components#

Glyphs stacked in one box; current shows, the others wait hidden. Switching cross-fades (.zg-swap in primitives.css).

TypeScript

function SwapIcon<K extends string>(props: SwapIconProps<K>): Element

Type parameters
Name	Type	Description
K	`extends string`

Parameters
Name	Type	Description
props	`SwapIconProps<K>`	Component props.

Element

SwapIcon props
Name	Type	Description
className?	`string`	Extra classes on the box, such as a text size.
current	`K`	Key in `icons` of the glyph to show.
icons	`Record<K, string>`	Key → icon class (`i-ph-*`).
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.

Props for SwapIcon.

TypeScript

interface SwapIconProps<K extends string>

SwapIconProps type parameters
Name	Type	Description
K	`extends string`

SwapIconProps properties
Name	Type	Description
className?	`string`	Extra classes on the box, such as a text size.
current	`K`	Key in `icons` of the glyph to show.
icons	`Record<K, string>`	Key → icon class (`i-ph-*`).
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.