import { forwardRef, useImperativeHandle, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const SpotifyIcon = 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( ".circle", { scale: [1, 1.05, 1] }, { duration: 0.5, ease: "easeInOut" }, ); animationControls.current.push( animate( ".wave1", { x: [-2, 2, -2], pathLength: [1, 0.8, 1] }, { duration: 0.8, ease: "easeInOut", repeat: Infinity }, ), ); animationControls.current.push( animate( ".wave2", { x: [-1, 1, -1], pathLength: [1, 0.9, 1] }, { duration: 0.7, ease: "easeInOut", repeat: Infinity }, ), ); animationControls.current.push( animate( ".wave3", { x: [-2, 2, -2], pathLength: [1, 0.85, 1] }, { duration: 0.9, ease: "easeInOut", repeat: Infinity }, ), ); }; const stop = () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animate(".circle", { scale: 1 }, { duration: 0.2 }); animate(".wave1", { x: 0, pathLength: 1 }, { duration: 0.2 }); animate(".wave2", { x: 0, pathLength: 1 }, { duration: 0.2 }); animate(".wave3", { x: 0, pathLength: 1 }, { duration: 0.2 }); }; useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); SpotifyIcon.displayName = "SpotifyIcon"; export default SpotifyIcon;

spotify-icon

Installation