İçeriğe geç
TR

22 ikon · MIT lisanslı

Animasyonlu dosya, klasör ve kullanıcı ikonları

Dosyalar, klasörler, kitaplar, posta, ekler ve kişiler. Kullanıcının üzerinde çalıştığı şeyleri etiketlerler; ekleme, çıkarma ve onay varyantları da liste ve ekip yönetimini daha canlı hissettirir.

22 ikondan 5 tanesi her tıklamada baştan oynar, 7 tanesi hover’da ileri, imleç ayrılınca geri oynar ve 10 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.

İçerik kategorisindeki tüm ikonlar

Nerede kullanılır

  • Dosya yöneticileri ve belge listeleri
  • Ek ve panoya kopyala düğmeleri
  • E-posta istemcilerinde gelen kutusu ve arşiv görünümleri
  • Kullanıcı ekleme ve çıkarma işlemleri olan ekip üyesi listeleri
  • Belgeler ve bağlantılar için paylaşım menüleri

Etkileşime göre

  • Tıklamalı animasyonlu ikonlar · 5

    Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. File Minus, File Plus, Folder Minus, Folder Plus, User Check.

  • Hover efektli animasyonlu ikonlar · 7

    mouseenter’da ileri, mouseleave’de geri oynar. Archive, Copy, Mail, Share, User minus, User plus, User X.

  • Hover’da oynayan animasyonlu ikonlar · 10

    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. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

Uygulamanıza ekleyin

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/copy.json
import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy 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

İçerik kategorisinde hangi ikonlar var?

22 ikon: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image ve 10 ikon daha. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu dosya, klasör ve kullanıcı ikonları React’te nasıl kullanılır?

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

Bu animasyonlu dosya, klasör ve kullanıcı 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/copy.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.