Přejít na obsah
CS

64 ikon · licence MIT

Animované ikony akcí

Slovesa rozhraní: uložit, smazat, stáhnout, obnovit, lajknout, přidat do záložek, hledat a nastavení. Každá ikona potvrdí kliknutí nebo hover, ke kterému patří: srdce se po lajknutí příspěvku vyplní a koši se před smazáním nadzvedne víko.

Kategorie obsahuje 64 ikon: 2 se přehrávají ve smyčce, 14 se kliknutím přepíná mezi dvěma stavy, 30 se přehraje při každém kliknutí, 11 se při najetí myší přehraje a při odjetí přehraje pozpátku, 6 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 a Lottie JSON animace (61 z nich i jako statické SVG), zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Akce

Kde je použít

  • Tlačítka To se mi líbí, oblíbené a záložky na kartách
  • Tlačítka stáhnout, nahrát a uložit, která akci potvrdí
  • Zobrazení a skrytí hesla v přihlašovacím formuláři
  • Tlačítka obnovit a synchronizovat v dashboardech
  • Tlačítka smazat v tabulkách a seznamech souborů
  • Vyhledávací pole, které se změní v tlačítko pro vymazá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. Checkmark, Help.

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

    Kliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Animované ikony na kliknutí · 30

    Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Animované ikony reagující na hover · 11

    Při najetí myší (mouseenter) se přehraje dopředu, při odjetí (mouseleave) pozpátku. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

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

    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. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • 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á. Flag.

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

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

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

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

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

<AnimatedHeart 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 akcí sada obsahuje?

64 ikon: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 a 52 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é ikony akcí v Reactu?

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

Můžu animované ikony akcí 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/heart.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.