import { forwardRef, useImperativeHandle } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const CurrencyBitcoinIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = async () => { await animate( ".btc-main, .btc-lines, .btc-center", { pathLength: 0, opacity: 0 }, { duration: 0 }, ); await animate( ".btc-lines", { pathLength: 1, opacity: 1 }, { duration: 0.25, ease: "easeOut" }, ); await animate( ".btc-main", { pathLength: 1, opacity: 1 }, { duration: 0.35, ease: "easeOut" }, ); await animate( ".btc-center", { pathLength: 1, opacity: 1 }, { duration: 0.2, ease: "easeOut" }, ); animate( ".btc-symbol", { scale: [0.95, 1] }, { duration: 0.2, ease: "easeOut" }, ); }; const stop = () => { animate( ".btc-main, .btc-lines, .btc-center", { pathLength: 1, opacity: 1 }, { duration: 0.2 }, ); animate(".btc-symbol", { scale: 1 }, { duration: 0.2 }); }; useImperativeHandle(ref, () => { return { startAnimation: start, stopAnimation: stop, }; }); const handleHoverStart = () => { start(); }; const handleHoverEnd = () => { stop(); }; return ( ); }, ); CurrencyBitcoinIcon.displayName = "CurrencyBitcoinIcon"; export default CurrencyBitcoinIcon;

currency-bitcoin-icon

Installation