annoyed-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const AnnoyedIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(".eyes", { scaleX: 0.7 }, { duration: 0.2, ease: "easeOut" });
14      animate(".mouth", { y: 1 }, { duration: 0.3, ease: "easeOut" });
15    };
16 
17    const stop = () => {
18      animate(".eyes", { scaleX: 1 }, { duration: 0.2, ease: "easeInOut" });
19      animate(".mouth", { y: 0 }, { duration: 0.2, ease: "easeInOut" });
20    };
21 
22    useImperativeHandle(ref, () => {
23      return {
24        startAnimation: start,
25        stopAnimation: stop,
26      };
27    });
28 
29    const handleHoverStart = () => {
30      start();
31    };
32 
33    const handleHoverEnd = () => {
34      stop();
35    };
36 
37    return (
38      <motion.svg
39        ref={scope}
40        onHoverStart={handleHoverStart}
41        onHoverEnd={handleHoverEnd}
42        xmlns="http://www.w3.org/2000/svg"
43        width={size}
44        height={size}
45        viewBox="0 0 24 24"
46        fill="none"
47        stroke={color}
48        strokeWidth={strokeWidth}
49        strokeLinecap="round"
50        strokeLinejoin="round"
51        className={`cursor-pointer ${className}`}
52      >
53        <circle cx="12" cy="12" r="10" />
54        <motion.path className="mouth" d="M8 15h8" />
55        <motion.g className="eyes">
56          <path d="M8 9h2" />
57          <path d="M14 9h2" />
58        </motion.g>
59      </motion.svg>
60    );
61  },
62);
63 
64AnnoyedIcon.displayName = "AnnoyedIcon";
65 
66export default AnnoyedIcon;