accessibility-icon

1import { forwardRef, useImperativeHandle, useRef } from "react";
2import type {
3  AnimatedIconHandle,
4  AnimatedIconProps,
5  IconEasing,
6} from "./types";
7import { motion, useAnimate } from "motion/react";
8 
9type CustomAnimation = {
10  rotateFrom: number;
11  rotateTo: number;
12  duration: number;
13  ease: IconEasing;
14  personDuration: number;
15  personEase: IconEasing;
16  exitDuration: number;
17};
18 
19const AccessibilityIcon = forwardRef<
20  AnimatedIconHandle,
21  AnimatedIconProps & CustomAnimation
22>(
23  (
24    {
25      size = 24,
26      color = "currentColor",
27      strokeWidth = 2,
28      className = "",
29      rotateFrom = 0,
30      rotateTo = 360,
31      duration = 1,
32      ease = "easeInOut",
33      personDuration = 0.6,
34      personEase = "easeInOut",
35      exitDuration = 0.3,
36    },
37    ref,
38  ) => {
39    const [scope, animate] = useAnimate();
40    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
41 
42    const start = async () => {
43      animationControls.current.forEach((control) => control.stop());
44      animationControls.current = [];
45 
46      animationControls.current.push(
47        animate(
48          ".wheel",
49          { rotate: [rotateFrom, rotateTo] },
50          { duration: duration, ease: ease, repeat: Infinity },
51        ),
52      );
53      animate(
54        ".person",
55        { y: [0, -2, 0] },
56        { duration: personDuration, ease: personEase },
57      );
58    };
59 
60    const stop = () => {
61      animationControls.current.forEach((control) => control.stop());
62      animationControls.current = [];
63 
64      animate(".wheel", { rotate: 0 }, { duration: exitDuration });
65      animate(".person", { y: 0 }, { duration: exitDuration });
66    };
67 
68    useImperativeHandle(ref, () => {
69      return {
70        startAnimation: start,
71        stopAnimation: stop,
72      };
73    });
74 
75    const handleHoverStart = () => {
76      start();
77    };
78 
79    const handleHoverEnd = () => {
80      stop();
81    };
82 
83    return (
84      <motion.svg
85        ref={scope}
86        onHoverStart={handleHoverStart}
87        onHoverEnd={handleHoverEnd}
88        xmlns="http://www.w3.org/2000/svg"
89        width={size}
90        height={size}
91        viewBox="0 0 24 24"
92        fill="none"
93        stroke={color}
94        strokeWidth={strokeWidth}
95        strokeLinecap="round"
96        strokeLinejoin="round"
97        className={`cursor-pointer ${className} `}
98      >
99        <motion.circle className="person" cx="16" cy="4" r="1" />
100        <motion.path className="person" d="m18 19 1-7-6 1" />
101// … truncated