import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const ShoppingCartIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate( ".cart-upper", { x: [0, 10, 0], }, { duration: 0.6, ease: "easeInOut", }, ); animate( ".cart-wheel-left", { rotate: [0, 180, 0], x: [0, 10, 0], }, { duration: 0.6, ease: "easeInOut", }, ); animate( ".cart-wheel-right", { rotate: [0, 180, 0], x: [0, 10, 0], }, { duration: 0.6, ease: "easeInOut", }, ); animate( ".cart-item", { y: [0, -2, 0], }, { duration: 0.4, ease: "easeInOut", }, ); }, [animate]); const stop = useCallback(() => { animate( ".cart-upper, .cart-wheel-left, .cart-wheel-right, .cart-item", { x: 0, rotate: 0, y: 0 }, { duration: 0.2, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); ShoppingCartIcon.displayName = "ShoppingCartIcon"; export default ShoppingCartIcon;

shopping-cart-icon

Installation