---
title: "Icon motion"
description: "Herhangi bir lucide ikonuna data-anim verin; ikon, en yakın buton veya link hover ya da klavye odağı aldığında kısa bir mikro animasyon oynatır. JavaScript gerekmez."
---

<Callout type="info" title="Ne zaman kullanılır">
Butonlarda ve linklerde ikonun aksiyonu anlatmasına yardım etmek için. Animasyon dekorasyon değil, ipucudur.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/theme @ikas/animated-check
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### data-anim değerleri

Üzerine gelin veya Tab ile odaklanın. Her değer bir ikon ailesine göre seçildi.

**Örnek: data-anim değerleri** (`icon-motion/gallery`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/icon-motion/gallery)

```tsx
import { ArrowRightIcon, ArrowUpRightIcon, BellIcon, DownloadIcon, PencilIcon, SettingsIcon, ShoppingCartIcon, StarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

const items = [
  { anim: "spin", label: "Ayarlar", Icon: SettingsIcon },
  { anim: "nudge", label: "Devam et", Icon: ArrowRightIcon, end: true },
  { anim: "lift", label: "Mağazada aç", Icon: ArrowUpRightIcon, end: true },
  { anim: "drop", label: "İndir", Icon: DownloadIcon },
  { anim: "ring", label: "Bildirimler", Icon: BellIcon },
  { anim: "wiggle", label: "Düzenle", Icon: PencilIcon },
  { anim: "bounce", label: "Sepete ekle", Icon: ShoppingCartIcon },
  { anim: "pop", label: "Favori", Icon: StarIcon },
] as const

export default function IconMotionGallery() {
  return (
    <div className="grid w-full max-w-xl grid-cols-2 gap-3 sm:grid-cols-4">
      {items.map(({ anim, label, Icon, ...rest }) => (
        <div key={anim} className="flex flex-col items-center gap-2">
          <Button variant="outline" className="w-full">
            {"end" in rest ? null : <Icon data-anim={anim} data-icon="inline-start" />}
            {label}
            {"end" in rest ? <Icon data-anim={anim} data-icon="inline-end" /> : null}
          </Button>
          <code className="font-mono text-[11px] text-muted-foreground">{anim}</code>
        </div>
      ))}
    </div>
  )
}
```

### Kopyala ve onay

CopyIconButton kopyalayınca ikon çizilen bir onay işaretine dönüşür. AnimatedCheckIcon kayıt gibi tamamlanan işlemler için.

**Örnek: Kopyala ve onay** (`icon-motion/copy-check`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/icon-motion/copy-check)

```tsx
import * as React from "react"

import { Button } from "@/components/ui/button"
import { AnimatedCheckIcon, CopyIconButton } from "@/components/ikas/animated-check"

export default function IconMotionCopyCheck() {
  const [saved, setSaved] = React.useState(0)

  return (
    <div className="flex flex-wrap items-center gap-6">
      <div className="flex h-10 items-center gap-2 rounded-lg border bg-card pr-1.5 pl-3 font-mono text-[13px]">
        sk_test_8f2a…c91
        <CopyIconButton value="sk_test_8f2a91c91" label="API anahtarını kopyala" size="icon-xs" />
      </div>
      <div className="flex items-center gap-3">
        <Button variant="outline" onClick={() => setSaved((n) => n + 1)}>
          Kaydet
        </Button>
        {saved > 0 && (
          <span key={saved} className="flex items-center gap-1.5 text-sm text-success">
            <AnimatedCheckIcon />
            Kaydedildi
          </span>
        )}
      </div>
    </div>
  )
}
```

### Giriş sırası

animate-panel-enter ve --stagger ile kartlar sırayla, hafif bulanıklıktan belirir. Sayfa ilk yüklendiğinde metrikler için.

**Örnek: Giriş sırası** (`icon-motion/stagger`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/icon-motion/stagger?align=stretch)

```tsx
import * as React from "react"
import { RotateCcwIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

const tiles = [
  { label: "Görüntülenme", value: "18.365" },
  { label: "Açılma oranı", value: "%21,7" },
  { label: "Sepete ekleme", value: "663" },
  { label: "Gelir", value: "₺48.920" },
]

export default function IconMotionStagger() {
  const [run, setRun] = React.useState(0)

  return (
    <div className="flex w-full flex-col items-start gap-4">
      <div key={run} className="grid w-full grid-cols-2 gap-3 sm:grid-cols-4">
        {tiles.map((tile, i) => (
          <div key={tile.label} style={{ "--stagger": i } as React.CSSProperties} className="flex flex-col gap-1 rounded-lg bg-card p-4 shadow-card animate-panel-enter">
            <span className="text-[13px] text-muted-foreground">{tile.label}</span>
            <span className="text-xl font-semibold tracking-[-0.02em] tabular-nums">{tile.value}</span>
          </div>
        ))}
      </div>
      <Button variant="ghost" size="sm" onClick={() => setRun((n) => n + 1)}>
        <RotateCcwIcon data-anim="spin" data-icon="inline-start" />
        Tekrar oynat
      </Button>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- İkonun anlamına uyan değeri seçin: zil için ring, indirme için drop.
- Bir satırda veya araç çubuğunda aynı değeri tutarlı kullanın.

**Yapmayın:**

- Hover dışında sürekli dönen veya yanıp sönen ikonlar kullanmayın.
- Metinsiz bir ikonu animasyonla açıklamaya çalışmayın; aria-label her zaman gerekli.

## API

### `data-anim`

<TypeTable type={{
  "spin": {
    "type": "Settings, RefreshCw, RotateCcw",
    "description": "90° döner. Ayarlar ve yenileme."
  },
  "nudge": {
    "type": "ArrowRight, ChevronRight",
    "description": "2px sağa kayar. İleri gitme ve devam."
  },
  "lift": {
    "type": "ArrowUpRight, ExternalLink, Send",
    "description": "Sağ üste kalkar. Yeni sekmede açma ve gönderme."
  },
  "drop": {
    "type": "Download, ArrowDown",
    "description": "Aşağı inip döner. İndirme ve dışa aktarma."
  },
  "ring": {
    "type": "Bell, BellRing",
    "description": "Zil gibi sallanır. Bildirimler."
  },
  "wiggle": {
    "type": "Pencil, Trash2, FileText",
    "description": "Kısa bir sağa sola sallanma. Düzenleme ve silme."
  },
  "bounce": {
    "type": "ShoppingCart, Plus, Package",
    "description": "Yukarı zıplar. Ekleme aksiyonları."
  },
  "pop": {
    "type": "Star, Heart, Search, Check",
    "description": "Hafifçe büyür. Favori, arama ve seçim."
  }
}} />

### `AnimatedCheckIcon`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `className` | `string` | - | Boyut ve renk. Varsayılan size-4, rengi metinden alır. |
| `strokeWidth` | `number` | `2.25` |  |

### `CopyIconButton`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` (zorunlu) | `string` | - | Panoya kopyalanacak metin. |
| `label` | `string` | `"Kopyala"` | Kopyalamadan önceki erişilebilir ad. |

`variant` ve `size` gibi Button prop'ları aynen geçer.