22 ikon · licence MIT

Animované ikony souborů, složek a uživatelů

Soubory, složky, knihy, pošta, přílohy a lidé. Označují věci, se kterými uživatel pracuje, a díky variantám pro přidání, odebrání a zaškrtnutí působí správa seznamů a týmů živě.

Kategorie obsahuje 22 ikon: 5 se přehraje při každém kliknutí, 7 se při najetí myší přehraje a při odjetí přehraje pozpátku a 10 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 Obsah

Kde je použít

Správci souborů a seznamy dokumentů
Tlačítka pro přílohy a kopírování do schránky
Doručená pošta a archiv v e-mailových klientech
Seznamy členů týmu s akcemi pro přidání a odebrání uživatele
Nabídky sdílení dokumentů a odkazů

Podle interakce

Animované ikony na kliknutí · 5
Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb. File Minus, File Plus, Folder Minus, Folder Plus, User Check.
Animované ikony reagující na hover · 7
Při najetí myší (mouseenter) se přehraje dopředu, při odjetí (mouseleave) pozpátku. Archive, Copy, Mail, Share, User minus, User plus, User X.
Animované ikony s přehráním při hoveru · 10
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. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

Přidejte ikonu do aplikace

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

npm install react-useanimations

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

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

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

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

import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy 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 souborů, složek a uživatelů sada obsahuje?

22 ikon: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image a 10 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 souborů, složek a uživatelů v Reactu?

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

Můžu animované ikony souborů, složek a uživatelů 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/copy.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.