Chuyển đến nội dung chính
VI

11 icon · Giấy phép MIT

Icon thương mại điện tử động

Giỏ hàng, túi mua sắm, thẻ giá, hộp quà, thẻ tín dụng và xe giao hàng cho cửa hàng online. Hiệu ứng thêm vào giỏ xác nhận cú click mà không cần đến toast, còn icon xe tải và kiện hàng khiến trạng thái đơn hàng sinh động hơn một chút.

Trong 11 icon, 1 icon phát lại sau mỗi lần click và 10 icon phát một lần khi hover. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, kèm SVG tĩnh, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.

Tất cả icon thương mại

Dùng ở đâu

  • Nút thêm vào giỏ trên thẻ sản phẩm
  • Nút giỏ hàng trên header của cửa hàng
  • Thanh toán và chọn phương thức thanh toán
  • Badge giảm giá, mã khuyến mãi và sale
  • Các bước giao hàng và theo dõi đơn
  • Thẻ quà tặng và tùy chọn gói quà

Theo tương tác

  • Icon động khi click · 1

    Phát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động. Shopping Cart.

  • Icon động phát khi hover · 10

    Phát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Click phát lại” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay shoppingCart bằng tên ghi trên trang của icon đó.

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

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

Với shadcn/ui, CLI sẽ thêm sẵn một component:

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

<AnimatedShoppingCart size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

Câu hỏi thường gặp

Bộ icon thương mại điện tử động gồm những icon nào?

11 icon: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag và Truck. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon thương mại điện tử động này trong React như thế nào?

Cài react-useanimations, thêm import shoppingCart from 'react-useanimations/lib/shoppingCart' rồi render <UseAnimations animation={shoppingCart} size={32} />. Icon sẽ chạy tương tác “Click phát lại” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/shopping-cart.json.

Có dùng được các icon thương mại điện tử động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/shopping-cart.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.