import { forwardRef, useImperativeHandle, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps, IconEasing, } from "./types"; import { motion, useAnimate } from "motion/react"; type CustomAnimation = { rotateFrom: number; rotateTo: number; duration: number; ease: IconEasing; personDuration: number; personEase: IconEasing; exitDuration: number; }; const AccessibilityIcon = forwardRef< AnimatedIconHandle, AnimatedIconProps & CustomAnimation >( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "", rotateFrom = 0, rotateTo = 360, duration = 1, ease = "easeInOut", personDuration = 0.6, personEase = "easeInOut", exitDuration = 0.3, }, ref, ) => { const [scope, animate] = useAnimate(); const animationControls = useRef>>([]); const start = async () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animationControls.current.push( animate( ".wheel", { rotate: [rotateFrom, rotateTo] }, { duration: duration, ease: ease, repeat: Infinity }, ), ); animate( ".person", { y: [0, -2, 0] }, { duration: personDuration, ease: personEase }, ); }; const stop = () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animate(".wheel", { rotate: 0 }, { duration: exitDuration }); animate(".person", { y: 0 }, { duration: exitDuration }); }; useImperativeHandle(ref, () => { return { startAnimation: start, stopAnimation: stop, }; }); const handleHoverStart = () => { start(); }; const handleHoverEnd = () => { stop(); }; return ( ); }, ); AccessibilityIcon.displayName = "AccessibilityIcon"; export default AccessibilityIcon;

accessibility-icon

Installation