Icon Swap
A square button whose icon shrinks into a blur as the next one grows out of it. Copy to check, play to pause, menu to close.
Usage
import { IconSwap } from '@wdzyi/ui';
<IconSwap
icon={copied ? 'check' : 'copy'}
label={copied ? 'Copied' : 'Copy'}
onClick={copy}
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- iconIconSwapName | string
- The icon to show: copy, check, play, pause, menu, close, or one of your own. Changing it runs the swap.
- labelstring
- Names the button. Change it with the icon, so it says what pressing it will do.
- iconsRecord<string, ReactNode>
- Icons of your own, by name, drawn on a 24 grid.
- size32 | 40 | 48 | 56 = 40
- Its width and height. The icon follows.
- plainboolean = false
- Leaves out the plate, for a toolbar.
Notes
- The new icon’s size springs a touch past and back, while its blur clears on a plain ease, so it’s sharp before it settles.
- The two share the middle of the button for about a quarter of a second, which is what makes it read as one icon turning into the next.
- It takes everything a button does, so add aria-pressed or aria-expanded where they fit.
- With reduced motion, the icon just changes.