Animate icon swaps with scale, blur, and fade transitions.
motion-sv
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
icon-swap-item.svelte
icon-swap.svelte
index.ts
Features
- Animate icon swaps with scale, blur, and fade transitions
- Compound component structure with IconSwap and IconSwapItem
- Swap triggers automatically when the item's key changes
Props
IconSwap
AnimatePresence wrapper for swapping icon content.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | Keyed IconSwapItem content to animate between. |
mode | AnimatePresenceProps['mode'] | 'popLayout' | Controls how entering and exiting items are sequenced. |
initial | boolean | false | Whether content should animate on its initial render. |
IconSwapItem
Motion element that defines the icon enter and exit transition.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | Icon content rendered inside the motion element. |
as | typeof motion.div | typeof motion.span | motion.div | Motion element used as the item wrapper. |