تعویض آیکون
icon-swapانیمیشندو آیکون در یک جایگاه؛ فعال با بزرگ شدن و رفع تاری میآد و دیگری کوچک و تار میشه. با rotate یکچهارم دور هم میچرخن.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add icon-swapنصب دستی
محتوای تب «کد» را در
components/animations/icon-swap.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { IconSwap } from "@/components/animations/icon-swap"23<IconSwap state={open ? "b" : "a"} a={<Menu />} b={<X />} rotate />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| state | "a" | "b" | - | کدام آیکون فعاله. |
| a / b | ReactNode | - | دو آیکون. |
| rotate | boolean | false | چرخش ۹۰ درجه هنگام تعویض؛ برای منو و بستن مناسبه. |
| duration | number | 250 | میلیثانیه. |