跳到主要内容
ZH

11 个图标 · MIT 许可

电子商务动态图标

购物车、购物袋、价格标签、礼物、信用卡和送货卡车，适用于网店。加入购物车的动画本身就能确认点击，无需再弹出提示；卡车和包裹图标则让订单状态更生动。

这 11 个图标中，1 个每次点击都会重播，10 个悬停时播放一次。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，并附带静态 SVG，可依据 MIT 许可证免费用于商业项目。

全部电子商务图标

适用场景

  • 商品卡片上的加入购物车按钮
  • 商店顶栏中的购物车和购物袋按钮
  • 结账和支付方式选择
  • 折扣、优惠券和促销标签
  • 物流和订单跟踪步骤
  • 礼品卡和礼品包装选项

按交互方式

  • 点击重播动态图标 · 1

    每次点击都从头播放一次，除非用户偏好减少动态效果。Shopping Cart.

  • 悬停播放动态图标 · 10

    在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

添加到您的应用

在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“点击重播”交互。本类别的所有图标用法都一样：把 shoppingCart 换成图标页面上的名称。

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

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

使用 shadcn/ui 时，CLI 会添加一个现成的组件：

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

<AnimatedShoppingCart size={24} />

没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。

常见问题

包含哪些电子商务动态图标？

共 11 个图标：Box、Briefcase、Credit Card、Dollar Sign、Gift、Package、Percent、Shopping Bag、Shopping Cart、Tag 和 Truck。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。

如何在 React 中使用这些电子商务动态图标？

安装 react-useanimations，添加 import shoppingCart from 'react-useanimations/lib/shoppingCart'，然后渲染 <UseAnimations animation={shoppingCart} size={32} />。图标会播放它的“点击重播”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/shopping-cart.json。

不用 React 也能使用这些电子商务动态图标吗？

可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/shopping-cart.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。这些图标都没有用到表达式，因此 lottie-web 的轻量版（light build）就够用了。