16 ikon · MIT lisanslı

Animasyonlu hava durumu ikonları

Hava tahminleri ve günün saatine bağlı her şey için güneş, ay, bulutlar, yağmur, kar, şimşek ve rüzgâr. Güneş ve ay aynı zamanda doğal bir açık/karanlık mod anahtarı oluşturur.

16 ikondan 2 tanesi tıklandığında iki durum arasında geçiş yapar, 13 tanesi hover’da bir kez oynar ve 1 tanesi hover süresince döngüde 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.

Hava durumu kategorisindeki tüm ikonlar

Nerede kullanılır

Hava durumu widget’ları ve tahmin kartları
Açık ve koyu tema anahtarları
Seyahat uygulamalarında gün doğumu ve gün batımı saatleri
Akıllı ev dashboard’larında sıcaklık değerleri
Enerji ve güç durumu göstergeleri

Etkileşime göre

Tıklayınca durum değiştiren animasyonlu ikonlar · 2
Tıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer. Cloud Off, Zap Off.
Hover’da oynayan animasyonlu ikonlar · 13
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. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
Hover’da döngüye giren animasyonlu ikonlar · 1
Hover süresince döngüde oynar, mouseleave’den sonra mevcut turu tamamlar ve azaltılmış hareket tercih edildiğinde statik kalır. Cloud.

Uygulamanıza ekleyin

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import sun from 'react-useanimations/lib/sun';

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

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

npx shadcn@latest add https://useanimations.com/r/sun.json

import { AnimatedSun } from '@/components/animations/sun';

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

Hava durumu kategorisinde hangi ikonlar var?

16 ikon: Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer ve 4 ikon daha. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

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

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

Bu animasyonlu hava durumu 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/sun.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.