Icon Swap

Animate icon swaps with scale, blur, and fade transitions.

Loading…

Installation

pnpm dlx shadcn@latest add @ncdai/icon-swap

import { IconSwap, IconSwapItem } from "@/components/icon-swap"

<IconSwap>
  <IconSwapItem key={isCopied ? "check" : "copy"}>
    {isCopied ? <CheckIcon /> : <CopyIcon />}
  </IconSwapItem>
</IconSwap>

Change the key on IconSwapItem whenever the icon should swap.

Use the following composition to build an IconSwap

IconSwap
└── IconSwapItem
    └── {icon}