Icon Swap
스케일·블러·페이드 전환으로 아이콘을 자연스럽게 교체해요.
설치
처음이라면 components.json에 @smlee 레지스트리를 한 번만 등록하세요.
{
"registries": {
"@smlee": "https://smlee.info/r/{name}.json"
}
}그다음 컴포넌트를 추가해요.
pnpm dlx shadcn@latest add @smlee/icon-swap
사용법
import { IconSwap, IconSwapItem } from "@/components/icon-swap"<IconSwap>
<IconSwapItem key={isCopied ? "check" : "copy"}>
{isCopied ? <CheckIcon /> : <CopyIcon />}
</IconSwapItem>
</IconSwap>아이콘을 교체하고 싶은 시점에 IconSwapItem의 key를 바꿔주세요.
구성
IconSwap은 다음 구조로 조합해요.
IconSwap
└── IconSwapItem
└── {icon}