İçeriğe geç
TR

10 ikon · MIT lisanslı

Diğer animasyonlu ikonlar

Daha büyük bir gruba girmeyen ikonlar: geri bildirim için emoji yüzler, bir kahve fincanı, bir saat, bir nabız çizgisi ve bir aşağı kaydır ipucu. Aşağı kaydır ikonu, hero bölümlerinde aşağıda daha fazlası olduğunu gösteren yaygın bir ipucudur.

10 ikondan 4 tanesi kesintisiz döngüde oynar ve 6 tanesi hover’da bir kez oynar. Her biri React bileşeni, shadcn/ui bileşeni, Lottie JSON animasyonu ve statik SVG olarak sunulur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Diğer kategorisindeki tüm ikonlar

Nerede kullanılır

  • Hero bölümünün altında aşağı kaydır ipuçları
  • Geri bildirim widget’larında mutlu, nötr ve üzgün yüzler
  • Aktivite ve uptime göstergeleri
  • Çalışma saatleri ve saat seçiciler
  • “Bana bir kahve ısmarla” ve destek bağlantıları

Etkileşime göre

  • Döngüsel animasyonlu ikonlar · 4

    Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır. Activity, Arrow down, Arrow up, Scroll down.

  • Hover’da oynayan animasyonlu ikonlar · 6

    Azaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz. Clock, Coffee, Frown, Meh, Smile, Tool.

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Döngü) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: scrollDown yerine ikonun sayfasındaki adı yazın.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import scrollDown from 'react-useanimations/lib/scrollDown';

<UseAnimations animation={scrollDown} size={32} />

shadcn/ui ile CLI hazır bir bileşen ekler:

npx shadcn@latest add https://useanimations.com/r/scroll-down.json
import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown size={24} />

React kullanmıyor musunuz? Her ikon /icons/<id>.json adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için Lottie ikonları sayfasına bakın.

Sık sorulan sorular

Diğer kategorisinde hangi ikonlar var?

10 ikon: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile ve Tool. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu diğer animasyonlu ikonlar React’te nasıl kullanılır?

react-useanimations paketini kurun, import scrollDown from 'react-useanimations/lib/scrollDown' satırını ekleyin ve <UseAnimations animation={scrollDown} size={32} /> ile render edin. İkon kendi etkileşimini (Döngü) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine npx shadcn@latest add https://useanimations.com/r/scroll-down.json komutunu çalıştırın.

Bu diğer animasyonlu ikonlar React olmadan kullanılabilir mi?

Evet. Her ikon https://useanimations.com/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin https://useanimations.com/icons/scroll-down.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce). Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.