16 ikon · licence MIT

Animované ikony počasí

Slunce, měsíc, mraky, déšť, sníh, blesky a vítr pro předpovědi a všechno, co se řídí denní dobou. Slunce a měsíc navíc přirozeně poslouží jako přepínač světlého a tmavého režimu.

Kategorie obsahuje 16 ikon: 2 se kliknutím přepínají mezi dvěma stavy, 13 se při najetí myší jednou přehraje a 1 se při najetí myší přehrává ve smyčce. Každá ikona je k dispozici jako React komponenta, komponenta pro shadcn/ui, Lottie JSON animace a statické SVG, zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Počasí

Kde je použít

Widgety a karty s předpovědí počasí
Přepínače světlého a tmavého motivu
Časy východu a západu slunce v cestovních aplikacích
Teploty na dashboardech chytré domácnosti
Indikátory energie a napájení

Podle interakce

Animované ikony přepínané kliknutím · 2
Kliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě. Cloud Off, Zap Off.
Animované ikony s přehráním při hoveru · 13
Při najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
Animované ikony se smyčkou při hoveru · 1
Při hoveru běží ve smyčce, po odjetí myši (mouseleave) dokončí aktuální cyklus a při preferenci omezeného pohybu zůstane statická. Cloud.

Přidejte ikonu do aplikace

V Reactu nainstalujte react-useanimations a naimportujte ikonu; svou interakci „přehrání při hoveru“ přehraje sama. Všechny ikony v této kategorii fungují stejně: sun jen nahraďte názvem ze stránky požadované ikony.

npm install react-useanimations

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

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

Se shadcn/ui vám CLI přidá hotovou komponentu:

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

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

<AnimatedSun size={24} />

Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese /icons/<id>.json; přehrávače pro web, iOS, Android a Flutter popisuje stránka Lottie ikony.

Časté dotazy

Které animované ikony počasí sada obsahuje?

16 ikon: Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer a 4 další. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.

Jak použít animované ikony počasí v Reactu?

Nainstalujte react-useanimations, přidejte import sun from 'react-useanimations/lib/sun' a vykreslete <UseAnimations animation={sun} size={32} />. Ikona přehraje svou interakci „přehrání při hoveru“ a převezme barvu textu. Se shadcn/ui místo toho spusťte npx shadcn@latest add https://useanimations.com/r/sun.json.

Můžu animované ikony počasí použít i bez Reactu?

Ano. Každá ikona je Lottie JSON soubor na adrese https://useanimations.com/icons/<id>.json (například https://useanimations.com/icons/sun.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině). Žádná z nich nepoužívá výrazy (expressions), takže stačí light build lottie-web.