import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const ChartHistogramIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(() => { animate( ".histogram-bar-1", { scaleY: [0, 1] }, { duration: 0.25, ease: "easeOut" }, ); animate( ".histogram-bar-2", { scaleY: [0, 1] }, { duration: 0.25, ease: "easeOut", delay: 0.08 }, ); animate( ".histogram-bar-3", { scaleY: [0, 1] }, { duration: 0.25, ease: "easeOut", delay: 0.16 }, ); animate( ".histogram-bar-4", { scaleY: [0, 1] }, { duration: 0.25, ease: "easeOut", delay: 0.24 }, ); animate( ".histogram-curve", { pathLength: [0, 1] }, { duration: 0.5, ease: "easeInOut", delay: 0.3 }, ); }, [animate]); const stop = useCallback(() => { animate( ".histogram-bar-1, .histogram-bar-2, .histogram-bar-3, .histogram-bar-4", { scaleY: 1 }, { duration: 0.2, ease: "easeInOut" }, ); animate( ".histogram-curve", { pathLength: 1 }, { duration: 0.2, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); ChartHistogramIcon.displayName = "ChartHistogramIcon"; export default ChartHistogramIcon;

chart-histogram-icon

Installation