Přejít na obsah
CS

34 ikon · licence MIT

Animované navigační ikony a šipky

Hamburger menu, které se promění v tlačítko pro zavření, a šipky, chevrony i rohové šipky, které se při najetí myší posunou svým směrem. Je z nich hned jasné, kam ovládací prvek vede: otevřít panel, vrátit se zpět, rozbalit řádek, odejít z webu.

Kategorie obsahuje 34 ikon: 2 se přehrávají ve smyčce, 4 se kliknutím přepínají mezi dvěma stavy, 6 se přehraje při každém kliknutí a 22 se při najetí myší jednou přehraje. 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 Navigace

Kde je použít

  • Hamburger menu, které se na mobilu změní v tlačítko pro zavření
  • Tlačítka předchozí a další v karuselech a stránkování
  • Chevrony v akordeonech a rozbalovacích nabídkách
  • Odkazy zpět nahoru a výzvy k posunu dolů
  • Odkazy pro přihlášení a odhlášení
  • Označení externích odkazů a přepínače postranního panelu

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. More Horizontal, More Vertical.

  • Animované ikony přepínané kliknutím · 4

    Kliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě. Burger Menu, Menu V2, Menu V3, Menu V4.

  • Animované ikony na kliknutí · 6

    Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.

  • Animované ikony s přehráním při hoveru · 22

    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. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

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ě: menu jen nahraďte názvem ze stránky požadované ikony.

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

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

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

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

<AnimatedMenu 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é navigační ikony a šipky sada obsahuje?

34 ikon: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down a 22 dalších. 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é navigační ikony a šipky v Reactu?

Nainstalujte react-useanimations, přidejte import menu from 'react-useanimations/lib/menu' a vykreslete <UseAnimations animation={menu} 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/menu.json.

Můžu animované navigační ikony a šipky 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/menu.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.