import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const TelephoneIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate(".stadium-roof", { y: -3 }, { duration: 0.25, ease: "easeOut" }); animate( ".stadium-pillar-left", { y: -2 }, { duration: 0.25, ease: "easeOut" }, ); animate( ".stadium-pillar-right", { y: -2 }, { duration: 0.25, ease: "easeOut" }, ); animate( ".stadium-center", { scale: [1, 1.15, 1] }, { duration: 0.3, ease: "easeInOut" }, ); animate( ".stadium-bowl", { scaleY: [1, 0.97, 1] }, { duration: 0.3, ease: "easeInOut" }, ); }, [animate]); const stop = useCallback(async () => { const resetProps = { x: 0, y: 0, scale: 1, scaleY: 1 }; const resetOptions = { duration: 0.25, ease: "easeInOut" as const }; animate( ".stadium-roof, .stadium-pillar-left, .stadium-pillar-right, .stadium-center, .stadium-bowl", resetProps, resetOptions, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); TelephoneIcon.displayName = "TelephoneIcon"; export default TelephoneIcon;

telephone-icon

Installation