Přejít na obsah
CS

4 ikony · licence MIT

Animované ikony zvonků a notifikací

Zvonky, které zazvoní při nové aktivitě nebo se přepínají mezi zvonkem a přeškrtnutým zvonkem. Krátké zhoupnutí zvonku přitáhne pozornost k počtu nepřečtených zpráv a přepínací varianty zároveň poslouží jako ztlumení kanálu nebo vlákna.

Kategorie obsahuje 4 ikony: 2 se přehrávají ve smyčce a 2 se kliknutím přepínají mezi dvěma stavy. 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 Notifikace

Kde je použít

  • Tlačítko centra notifikací v hlavičce aplikace
  • Odznak nepřečtených zpráv, který zazvoní, když přijde nová zpráva
  • Ztlumení a zrušení ztlumení kanálu nebo vlákna
  • Nastavení e-mailových a push notifikací
  • Tlačítka pro odběr připomínek a upozornění

Podle interakce

  • Animované ikony ve smyčce · 2

    Přehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku. Notification V3, Notification V4.

  • 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ě. Notification, Notification V2.

Přidejte ikonu do aplikace

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

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

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

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

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

<AnimatedNotification 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 zvonků a notifikací sada obsahuje?

4 ikony: Notification, Notification V2, Notification V3 a Notification V4. 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 zvonků a notifikací v Reactu?

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

Můžu animované ikony zvonků a notifikací 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/notification.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.