İçeriğe geç
TR

5 ikon · MIT lisanslı

Animasyonlu uyarı ikonları

Yanıp sönmeden, tam fark edilecek kadar hafifçe atan uyarı üçgenleri, uyarı daireleri ve dur işaretleri. Hatalı bir form alanının yanına, bir hata banner’ının başına ya da durum sütununa koyun; sabit bir ikonu kaydırırken gözden kaçırmak kolaydır.

5 ikondan 4 tanesi kesintisiz döngüde oynar ve 1 tanesi her tıklamada baştan 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.

Uyarılar kategorisindeki tüm ikonlar

Nerede kullanılır

  • Form alanlarının altındaki satır içi doğrulama hataları
  • Sayfanın üstündeki hata ve uyarı banner’ları
  • Deploy ya da iş durumu tablolarındaki başarısız satırlar
  • Geri alınamaz işlemler için onay diyalogları
  • Bir kesinti sırasında sistem durum sayfaları

Etkileşime göre

  • Döngüsel animasyonlu ikonlar · 4

    Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır. Alert circle, Alert octagon, Alert triangle, Error.

  • Tıklamalı animasyonlu ikonlar · 1

    Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. X Octagon.

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: alertTriangle yerine ikonun sayfasındaki adı yazın.

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

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

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

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json
import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

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

Uyarılar kategorisinde hangi ikonlar var?

5 ikon: Alert circle, Alert octagon, Alert triangle, Error ve X Octagon. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

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

react-useanimations paketini kurun, import alertTriangle from 'react-useanimations/lib/alertTriangle' satırını ekleyin ve <UseAnimations animation={alertTriangle} 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/alert-triangle.json komutunu çalıştırın.

Bu animasyonlu uyarı 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/alert-triangle.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). Error After Effects ifadeleri (expressions) kullandığı için web’de lottie-web’in tam sürümü (full build) gerekir.