# motion/SwapIcon (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/motion/SwapIcon.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/motion/SwapIcon.tsx).

## Components

### `SwapIcon`

Component.

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

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

**Type parameters**

- `K` (`extends string`)

**Parameters**

- `props` (`SwapIconProps<K>`): Component props.

**Returns** `Element`

**Props**

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

Source: [ui/src/motion/SwapIcon.tsx:21](https://github.com/Tahul/zidane/blob/main/ui/src/motion/SwapIcon.tsx#L21)

## Interfaces

### `SwapIconProps`

Interface.

Props for [`SwapIcon`](https://zidane.si/docs/reference/ui-motion-swap-icon.md#SwapIcon).

```ts
interface SwapIconProps<K extends string>
```

**Type parameters**

- `K` (`extends string`)

**Properties**

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

Source: [ui/src/motion/SwapIcon.tsx:4](https://github.com/Tahul/zidane/blob/main/ui/src/motion/SwapIcon.tsx#L4)