import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const ExpandIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate( ".arrows-tr", { x: 2, y: -2 }, { duration: 0.25, ease: "easeOut" }, ); animate( ".arrows-tl", { x: -2, y: -2 }, { duration: 0.25, ease: "easeOut" }, ); animate( ".arrows-br", { x: 2, y: 2 }, { duration: 0.25, ease: "easeOut" }, ); animate( ".arrows-bl", { x: -2, y: 2 }, { duration: 0.25, ease: "easeOut" }, ); animate(".corners", { scale: 1.08 }, { duration: 0.25, ease: "easeOut" }); }, [animate]); const stop = useCallback(() => { animate( ".arrows-tr, .arrows-tl, .arrows-br, .arrows-bl", { x: 0, y: 0 }, { duration: 0.2, ease: "easeInOut" }, ); animate(".corners", { scale: 1 }, { duration: 0.2, ease: "easeInOut" }); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); ExpandIcon.displayName = "ExpandIcon"; export default ExpandIcon;

expand-icon

Installation