import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const DinoIcon = forwardRef( ({ size = 24, className = "" }, ref) => { const [scope, animate] = useAnimate(); const start = useCallback(() => { // 1. Tilt head to the sky animate( scope.current, { rotate: -10 }, { duration: 0.3, ease: "easeOut", }, ); }, [animate, scope]); const stop = useCallback(() => { animate(scope.current, { rotate: 0 }, { duration: 0.2, ease: "easeIn" }); }, [animate, scope]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); const cutoutColor = "var(--background)"; return ( {/* 1. Full Body Silhouette (Solid currentColor) */} {/* 2. Interior Cutouts (Fill with background) */} {/* 3. Head/Face segments: Solid currentColor */} {/* 4. Eye Detail: User requested currentColor (Solid) */} {/* Legs: Solid currentColor */} ); }, ); DinoIcon.displayName = "DinoIcon"; export default DinoIcon;

dino-icon

Installation