import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const PlugConnectedIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate( ".plug-upper-part", { y: 2, x: -2, }, { duration: 0.35, ease: "easeOut", }, ); animate( ".plug-lower-leg", { opacity: 0, }, { duration: 0.35, ease: "easeOut", }, ); animate( ".plug-lower-part", { y: -2, x: 2, }, { duration: 0.35, ease: "easeOut", }, ); }, [animate]); const stop = useCallback(async () => { animate( ".plug-upper-part, .plug-lower-leg, .plug-lower-part", { y: 0, x: 0, opacity: 1, }, { duration: 0.3, ease: "easeInOut", }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* */} {/* */} ); }, ); PlugConnectedIcon.displayName = "PlugConnectedIcon"; export default PlugConnectedIcon;

plug-connected-icon

Installation