import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const UserPlusIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { // User bounces slightly animate( ".user-avatar", { scale: 1.05, y: -1, }, { duration: 0.25, ease: "easeOut", }, ); // Plus sign expands and rotates animate( ".plus-sign", { scale: 1.15, rotate: 90, }, { duration: 0.3, ease: "easeOut", }, ); }, [animate]); const stop = useCallback(async () => { animate( ".user-avatar", { scale: 1, y: 0, }, { duration: 0.2, ease: "easeInOut", }, ); animate( ".plus-sign", { scale: 1, rotate: 0, }, { duration: 0.25, ease: "easeInOut", }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* User avatar */} {/* Plus sign */} ); }, ); UserPlusIcon.displayName = "UserPlusIcon"; export default UserPlusIcon;

user-plus-icon

Installation