Přejít na obsah
CS

11 ikon · licence MIT

Animované ikony pro e-shopy

Nákupní košíky, tašky, cenovky, dárky, platební karty a dodávky pro e-shopy. Animace přidání do košíku potvrdí kliknutí i bez toast notifikace a ikony dodávky a balíku dodají stavu objednávky trochu života.

Kategorie obsahuje 11 ikon: 1 se přehraje při každém kliknutí 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 E-commerce

Kde je použít

  • Tlačítka Přidat do košíku na kartách produktů
  • Tlačítka košíku a tašky v hlavičce e-shopu
  • Pokladna a výběr platební metody
  • Štítky slev, kupónů a výprodejů
  • Kroky doručení a sledování objednávky
  • Dárkové karty a možnosti dárkového balení

Podle interakce

  • Animované ikony na kliknutí · 1

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

  • 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. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

Přidejte ikonu do aplikace

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/shopping-cart.json
import { AnimatedShoppingCart } from '@/components/animations/shopping-cart';

<AnimatedShoppingCart 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 pro e-shopy sada obsahuje?

11 ikon: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag a Truck. 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 pro e-shopy v Reactu?

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

Můžu animované ikony pro e-shopy 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/shopping-cart.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.