import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const UnlinkIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate( ".chain-left", { x: -3, y: 3, }, { duration: 0.3, ease: "easeOut", }, ); await animate( ".chain-right", { x: 3, y: -3, }, { duration: 0.3, ease: "easeOut", }, ); animate( ".break-indicator", { scale: [1, 1.2, 1], opacity: [1, 0.6, 1], }, { duration: 0.4, ease: "easeInOut", }, ); animate( ".chain-left", { x: 0, y: 0, }, { duration: 0.3, ease: "easeIn", }, ); animate( ".chain-right", { x: 0, y: 0, }, { duration: 0.3, ease: "easeIn", }, ); }, [animate]); const stop = useCallback(() => { animate( ".chain-left", { x: 0, y: 0 }, { duration: 0.2, ease: "easeOut" }, ); animate( ".chain-right", { x: 0, y: 0 }, { duration: 0.2, ease: "easeOut" }, ); animate( ".break-indicator", { scale: 1, opacity: 1 }, { duration: 0.2, ease: "easeOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); UnlinkIcon.displayName = "UnlinkIcon"; export default UnlinkIcon;

unlink-icon

Installation