import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const SlackIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate( ".piece1", { rotate: [0, -90, 0] }, { duration: 0.6, ease: "easeInOut" }, ); animate( ".piece2", { rotate: [0, 90, 0] }, { duration: 0.6, ease: "easeInOut", delay: 0.1 }, ); animate( ".piece3", { rotate: [0, -90, 0] }, { duration: 0.6, ease: "easeInOut", delay: 0.2 }, ); animate( ".piece4", { rotate: [0, 90, 0] }, { duration: 0.6, ease: "easeInOut", delay: 0.3 }, ); }, [animate]); const stop = useCallback(() => { animate( ".piece1, .piece2, .piece3, .piece4", { rotate: 0 }, { duration: 0.2, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); SlackIcon.displayName = "SlackIcon"; export default SlackIcon;

slack-icon

Installation