import { forwardRef, useImperativeHandle } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const AngryIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = async () => { animate( ".eyebrows", { y: 1, scaleY: 1.2 }, { duration: 0.3, ease: "easeOut" }, ); animate(".mouth", { scaleY: 1.2 }, { duration: 0.3, ease: "easeOut" }); animate(".eyes", { scale: 0.8 }, { duration: 0.3, ease: "easeOut" }); }; const stop = () => { animate( ".eyebrows", { y: 0, scaleY: 1 }, { duration: 0.2, ease: "easeInOut" }, ); animate(".mouth", { scaleY: 1 }, { duration: 0.2, ease: "easeInOut" }); animate(".eyes", { scale: 1 }, { duration: 0.2, ease: "easeInOut" }); }; useImperativeHandle(ref, () => { return { startAnimation: start, stopAnimation: stop, }; }); const handleHoverStart = () => { start(); }; const handleHoverEnd = () => { stop(); }; return ( ); }, ); AngryIcon.displayName = "AngryIcon"; export default AngryIcon;

angry-icon

Installation