import { forwardRef, useImperativeHandle, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const QrcodeIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const animationControls = useRef>>([]); const start = async () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animate(".qr-scan", { opacity: 0, y: 0 }, { duration: 0 }); animate(".corner-rect", { pathLength: 0, opacity: 0 }, { duration: 0 }); animate(".inner-element", { opacity: 0, scale: 0.8 }, { duration: 0 }); animate(".center-dot", { scale: 0, opacity: 0 }, { duration: 0 }); await animate( ".corner-rect", { pathLength: [0, 1], opacity: [0, 1] }, { duration: 0.4, ease: "easeOut", delay: (i) => i * 0.1 }, ); animationControls.current.push( animate( ".qr-scan", { opacity: [0, 1, 1, 0], y: [0, 30, 0, 0] }, { duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.3, }, ), ); await animate( ".inner-element", { opacity: [0, 1], scale: [0.8, 1] }, { duration: 0.3, ease: "easeOut", delay: (i) => i * 0.05 }, ); animate( ".center-dot", { scale: [0, 1.2, 1], opacity: [0, 1] }, { duration: 0.3, ease: "easeOut", delay: (i) => i * 0.08 }, ); }; const stop = () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animate( ".qr-scan, .corner-rect, .inner-element, .center-dot", { opacity: 1, pathLength: 1, scale: 1, y: 0 }, { duration: 0.2 }, ); }; useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); QrcodeIcon.displayName = "QrcodeIcon"; export default QrcodeIcon;

qrcode-icon

Installation