bug-icon

1import { forwardRef, useImperativeHandle } from "react";
2import { motion, useAnimate } from "motion/react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4 
5const BugIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 40, className = "", strokeWidth = 2, color = "currentColor" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      // Wiggle the legs
14      animate(
15        ".leg-left",
16        { x: [-1, 1, -1], rotate: [-5, 5, -5] },
17        { duration: 0.2, repeat: 2, ease: "easeInOut" },
18      );
19      animate(
20        ".leg-right",
21        { x: [1, -1, 1], rotate: [5, -5, 5] },
22        { duration: 0.2, repeat: 2, ease: "easeInOut" },
23      );
24      // Subtle body shake
25      animate(
26        ".body",
27        { x: [-0.5, 0.5, -0.5] },
28        { duration: 0.1, repeat: 2, ease: "easeInOut" },
29      );
30    };
31 
32    const stop = async () => {
33      animate(
34        ".leg-left, .leg-right, .body",
35        { x: 0, rotate: 0 },
36        { duration: 0.2 },
37      );
38    };
39 
40    useImperativeHandle(ref, () => ({
41      startAnimation: start,
42      stopAnimation: stop,
43    }));
44 
45    return (
46      <motion.svg
47        ref={scope}
48        onHoverStart={start}
49        onHoverEnd={stop}
50        xmlns="http://www.w3.org/2000/svg"
51        width={size}
52        height={size}
53        viewBox="0 0 24 24"
54        fill="none"
55        color={color}
56        stroke="currentColor"
57        strokeWidth={strokeWidth}
58        strokeLinecap="round"
59        strokeLinejoin="round"
60        className={`cursor-pointer ${className}`}
61      >
62        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
63        <path d="M9 9v-1a3 3 0 0 1 6 0v1" />
64        <path
65          className="body"
66          d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3"
67        />
68        {/* Left legs */}
69        <motion.path className="leg-left" d="M3 13l4 0" />
70        <motion.path className="leg-left" d="M4 19l3.35 -2" />
71        <motion.path className="leg-left" d="M4 7l3.75 2.4" />
72        {/* Right legs */}
73        <motion.path className="leg-right" d="M17 13l4 0" />
74        <motion.path className="leg-right" d="M20 19l-3.35 -2" />
75        <motion.path className="leg-right" d="M20 7l-3.75 2.4" />
76        {/* Center line */}
77        <path d="M12 20l0 -6" />
78      </motion.svg>
79    );
80  },
81);
82 
83BugIcon.displayName = "BugIcon";
84 
85export default BugIcon;