"use client"; import { forwardRef, useImperativeHandle, useCallback, useId } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const HashtagIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const maskId = useId(); const [scope, animate] = useAnimate(); const start = useCallback(async () => { // Reset all lines to be fully transparent and 0 length instantly await animate( ".h1, .h2, .v1, .v2", { pathLength: 0, opacity: 0 }, { duration: 0 }, ); // Horizontal lines come in first, one by one animate( ".h1", { pathLength: [0, 1], opacity: [0, 1] }, { duration: 0.35, ease: "easeOut", delay: 0 }, ); animate( ".h2", { pathLength: [0, 1], opacity: [0, 1] }, { duration: 0.35, ease: "easeOut", delay: 0.15 }, ); // Then vertical lines, one by one animate( ".v1", { pathLength: [0, 1], opacity: [0, 1] }, { duration: 0.35, ease: "easeOut", delay: 0.3 }, ); animate( ".v2", { pathLength: [0, 1], opacity: [0, 1] }, { duration: 0.35, ease: "easeOut", delay: 0.45 }, ); }, [animate]); const stop = useCallback(async () => { animate( ".h1, .h2, .v1, .v2", { pathLength: 1, opacity: 1 }, { duration: 0.25, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Horizontal lines */} {/* Vertical lines */} ); }, ); HashtagIcon.displayName = "HashtagIcon"; export default HashtagIcon;

Hashtag Icon

Installation