Přejít na obsah
CS

5 ikon · licence MIT

Animované ikony upozornění

Výstražné trojúhelníky, kroužky s vykřičníkem a značky stop, které pulzují tak akorát, aby si jich uživatel všiml, ale neblikají. Patří k chybnému poli formuláře, na začátek chybového banneru nebo do sloupce se stavem, kde se statická ikona snadno přehlédne.

Kategorie obsahuje 5 ikon: 4 se přehrávají ve smyčce a 1 se přehraje při každém kliknutí. 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 Upozornění

Kde je použít

  • Chyby validace pod poli formuláře
  • Chybové a varovné bannery v horní části stránky
  • Neúspěšné řádky v tabulce stavu deploye nebo úloh
  • Potvrzovací dialogy u nevratných akcí
  • Stavové stránky během výpadku

Podle interakce

  • Animované ikony ve smyčce · 4

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

  • Animované ikony na kliknutí · 1

    Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb. X Octagon.

Přidejte ikonu do aplikace

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

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

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

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

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

<AnimatedAlertTriangle 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 upozornění sada obsahuje?

5 ikon: Alert circle, Alert octagon, Alert triangle, Error a X Octagon. 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 upozornění v Reactu?

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

Můžu animované ikony upozornění 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/alert-triangle.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ě). Error používá výrazy (expressions) z After Effects, takže na webu potřebuje plný build lottie-web.