"use client"; import { forwardRef, useImperativeHandle, useEffect } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const BatteryChargingIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2.5, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); useEffect(() => { animate(".battery-bar-1", { opacity: 0 }, { duration: 0 }); animate(".battery-bar-2", { opacity: 0 }, { duration: 0 }); animate(".battery-bar-3", { opacity: 0 }, { duration: 0 }); animate(".battery-bar-4", { opacity: 0 }, { duration: 0 }); }, [animate]); const start = async () => { await animate( ".battery-bar-1", { opacity: 1 }, { duration: 0.15, ease: "easeOut" }, ); await animate( ".battery-bar-2", { opacity: 1 }, { duration: 0.15, ease: "easeOut" }, ); await animate( ".battery-bar-3", { opacity: 1 }, { duration: 0.15, ease: "easeOut" }, ); await animate( ".battery-bar-4", { opacity: 1 }, { duration: 0.15, ease: "easeOut" }, ); }; const stop = async () => { await animate( ".battery-bar-1, .battery-bar-2, .battery-bar-3, .battery-bar-4", { opacity: 0 }, { duration: 0.2, ease: "easeInOut" }, ); }; useImperativeHandle(ref, () => { return { startAnimation: start, stopAnimation: stop, }; }); const handleHoverStart = () => { start(); }; const handleHoverEnd = () => { stop(); }; return ( ); }, ); BatteryChargingIcon.displayName = "BatteryChargingIcon"; export default BatteryChargingIcon;

battery-charging-icon

Installation