angry-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const AngryIcon = 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(
14        ".eyebrows",
15        { y: 1, scaleY: 1.2 },
16        { duration: 0.3, ease: "easeOut" },
17      );
18      animate(".mouth", { scaleY: 1.2 }, { duration: 0.3, ease: "easeOut" });
19      animate(".eyes", { scale: 0.8 }, { duration: 0.3, ease: "easeOut" });
20    };
21 
22    const stop = () => {
23      animate(
24        ".eyebrows",
25        { y: 0, scaleY: 1 },
26        { duration: 0.2, ease: "easeInOut" },
27      );
28      animate(".mouth", { scaleY: 1 }, { duration: 0.2, ease: "easeInOut" });
29      animate(".eyes", { scale: 1 }, { duration: 0.2, ease: "easeInOut" });
30    };
31 
32    useImperativeHandle(ref, () => {
33      return {
34        startAnimation: start,
35        stopAnimation: stop,
36      };
37    });
38 
39    const handleHoverStart = () => {
40      start();
41    };
42 
43    const handleHoverEnd = () => {
44      stop();
45    };
46 
47    return (
48      <motion.svg
49        ref={scope}
50        onHoverStart={handleHoverStart}
51        onHoverEnd={handleHoverEnd}
52        xmlns="http://www.w3.org/2000/svg"
53        width={size}
54        height={size}
55        viewBox="0 0 24 24"
56        fill="none"
57        stroke={color}
58        strokeWidth={strokeWidth}
59        strokeLinecap="round"
60        strokeLinejoin="round"
61        className={`cursor-pointer ${className}`}
62      >
63        <circle cx="12" cy="12" r="10" />
64        <motion.path
65          className="mouth"
66          style={{ transformOrigin: "12px 16px" }}
67          d="M16 16s-1.5-2-4-2-4 2-4 2"
68        />
69        <motion.g className="eyebrows">
70          <path d="M7.5 8 10 9" />
71          <path d="m14 9 2.5-1" />
72        </motion.g>
73        <motion.g className="eyes">
74          <path d="M9 10h.01" />
75          <path d="M15 10h.01" />
76        </motion.g>
77      </motion.svg>
78    );
79  },
80);
81 
82AngryIcon.displayName = "AngryIcon";
83 
84export default AngryIcon;