import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const UnorderedListIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { // Lines extend from left to right animate( ".list-line-1", { scaleX: [0, 1], }, { duration: 0.25, ease: "easeOut", }, ); animate( ".list-line-2", { scaleX: [0, 1], }, { duration: 0.25, ease: "easeOut", delay: 0.1, }, ); animate( ".list-line-3", { scaleX: [0, 1], }, { duration: 0.25, ease: "easeOut", delay: 0.2, }, ); // Bullets pulse animate( ".list-bullets", { scale: [1, 1.3, 1], }, { duration: 0.4, ease: "easeInOut", }, ); }, [animate]); const stop = useCallback(async () => { animate( ".list-line-1", { scaleX: 1, }, { duration: 0.2, ease: "easeInOut", }, ); animate( ".list-line-2", { scaleX: 1, }, { duration: 0.2, ease: "easeInOut", }, ); animate( ".list-line-3", { scaleX: 1, }, { duration: 0.2, ease: "easeInOut", }, ); animate( ".list-bullets", { scale: 1, }, { duration: 0.2, ease: "easeInOut", }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* List lines */} {/* Bullets */} ); }, ); UnorderedListIcon.displayName = "UnorderedListIcon"; export default UnorderedListIcon;

unordered-list-icon

Installation