import { forwardRef, useImperativeHandle } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const CartIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = async () => { animate( ".cart-icon", { x: [0, 6, 0] }, { duration: 0.35, ease: "easeInOut" }, ); animate( ".cart-wheel-left", { rotate: [0, 360] }, { duration: 0.35, ease: "easeInOut" }, ); animate( ".cart-wheel-right", { rotate: [0, 360] }, { duration: 0.35, ease: "easeInOut" }, ); }; const stop = () => { animate(".cart-icon", { x: 0 }, { duration: 0.2 }); animate(".cart-wheel-left", { rotate: 0 }, { duration: 0.2 }); animate(".cart-wheel-right", { rotate: 0 }, { duration: 0.2 }); }; useImperativeHandle(ref, () => { return { startAnimation: start, stopAnimation: stop, }; }); const handleHoverStart = () => { start(); }; const handleHoverEnd = () => { stop(); }; return ( ); }, ); CartIcon.displayName = "CartIcon"; export default CartIcon;

cart-icon

Installation