banana-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BananaIcon = 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        ".peel",
15        { pathLength: [0, 1], opacity: [0, 1] },
16        { duration: 0.5, ease: "easeOut" },
17      );
18      await animate(
19        ".banana",
20        { rotate: [0, -5, 5, -5, 0], y: [0, -2, 0] },
21        { duration: 0.6, ease: "easeInOut" },
22      );
23    };
24 
25    const stop = () => {
26      animate(".peel", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
27    };
28 
29    useImperativeHandle(ref, () => {
30      return {
31        startAnimation: start,
32        stopAnimation: stop,
33      };
34    });
35 
36    const handleHoverStart = () => {
37      start();
38    };
39 
40    const handleHoverEnd = () => {
41      stop();
42    };
43 
44    return (
45      <motion.svg
46        ref={scope}
47        onHoverStart={handleHoverStart}
48        onHoverEnd={handleHoverEnd}
49        xmlns="http://www.w3.org/2000/svg"
50        width={size}
51        height={size}
52        viewBox="0 0 24 24"
53        fill="none"
54        stroke={color}
55        strokeWidth={strokeWidth}
56        strokeLinecap="round"
57        strokeLinejoin="round"
58        className={`cursor-pointer ${className}`}
59      >
60        <motion.path
61          className="peel"
62          d="M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5"
63          initial={{ pathLength: 1, opacity: 1 }}
64        />
65        <motion.path
66          className="banana"
67          style={{ transformOrigin: "center" }}
68          d="M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z"
69        />
70      </motion.svg>
71    );
72  },
73);
74 
75BananaIcon.displayName = "BananaIcon";
76 
77export default BananaIcon;