import { forwardRef, useImperativeHandle } from "react"; import { motion, useAnimate } from "motion/react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; const BugIcon = forwardRef( ( { size = 40, className = "", strokeWidth = 2, color = "currentColor" }, ref, ) => { const [scope, animate] = useAnimate(); const start = async () => { // Wiggle the legs animate( ".leg-left", { x: [-1, 1, -1], rotate: [-5, 5, -5] }, { duration: 0.2, repeat: 2, ease: "easeInOut" }, ); animate( ".leg-right", { x: [1, -1, 1], rotate: [5, -5, 5] }, { duration: 0.2, repeat: 2, ease: "easeInOut" }, ); // Subtle body shake animate( ".body", { x: [-0.5, 0.5, -0.5] }, { duration: 0.1, repeat: 2, ease: "easeInOut" }, ); }; const stop = async () => { animate( ".leg-left, .leg-right, .body", { x: 0, rotate: 0 }, { duration: 0.2 }, ); }; useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Left legs */} {/* Right legs */} {/* Center line */} ); }, ); BugIcon.displayName = "BugIcon"; export default BugIcon;

bug-icon

Installation