import { forwardRef, useImperativeHandle, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const WashingMachineIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const animationControls = useRef>>([]); const start = async () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; // Continuously rotate the inner drum while hovering animationControls.current.push( animate( ".drum-inner", { rotate: [0, 360], }, { duration: 2, repeat: Infinity, ease: "linear", }, ), ); }; const stop = () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; // Stop the rotation animate( ".drum-inner", { rotate: 0, }, { duration: 0.3, ease: "easeOut", }, ); }; useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Machine body */} {/* Drum outer */} {/* Control buttons */} {/* Inner drum - rotating part */} ); }, ); WashingMachineIcon.displayName = "WashingMachineIcon"; export default WashingMachineIcon;

washing-machine-icon

Installation