İçeriğe geç
TR

4 ikon · MIT lisanslı

Animasyonlu bildirim zili ikonları

Yeni bir hareket olduğunda çalan ya da zil ile sessiz zil arasında geçiş yapan zil ikonları. Zilin kısa bir sallanışı gözü okunmamış sayısına çeker; geçiş yapan sürümler aynı zamanda bir kanalın ya da konunun sessize alma düğmesi olarak işe yarar.

4 ikondan 2 tanesi kesintisiz döngüde oynar ve 2 tanesi tıklandığında iki durum arasında geçiş yapar. 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.

Bildirimler kategorisindeki tüm ikonlar

Nerede kullanılır

  • Uygulama başlığındaki bildirim merkezi düğmesi
  • Yeni mesaj geldiğinde çalan okunmamış rozeti
  • Bir kanal ya da konu için sessize alma ve sesi açma anahtarı
  • E-posta ve push bildirimi ayarları
  • Hatırlatıcı ve uyarı abonelik düğmeleri

Etkileşime göre

Uygulamanıza ekleyin

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

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

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

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

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

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

Bildirimler kategorisinde hangi ikonlar var?

4 ikon: Notification, Notification V2, Notification V3 ve Notification V4. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu bildirim zili ikonları React’te nasıl kullanılır?

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

Bu animasyonlu bildirim zili 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/notification.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.