import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const LocateIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(() => { // 1. Snappy Appearance of center target animate( ".locate-target", { opacity: 1, scale: 1 }, { duration: 0.3, ease: "backOut" }, ); // 2. Subtle rotation for mechanical feel animate( ".locate-crosshairs", { rotate: 90 }, { duration: 0.3, ease: "easeInOut" }, ); }, [animate]); const stop = useCallback(() => { animate( ".locate-target", { opacity: 0, scale: 0 }, { duration: 0.2, ease: "easeIn" }, ); animate( ".locate-crosshairs", { rotate: 0 }, { duration: 0.3, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Ring */} {/* The "Fix" Target - Appears on Hover */} ); }, ); LocateIcon.displayName = "LocateIcon"; export default LocateIcon;

locate-icon

Installation