Icon Swap

Use cases

• Copy buttons that switch to a check on success.
• Toggle buttons such as play and pause.
• Icons that follow the selected tab or option.

Installation

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

Usage

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.

Composition

Use the following composition to build an IconSwap

IconSwap
└── IconSwapItem
    └── {icon}

Credits

• Emil Kowalski

License and usage

• Free to use and modify in both personal and commercial projects.
• Attribution is appreciated but not required.
• Released under the MIT License.