arrow-big-down-dash-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowBigDownDashIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 40, className = "", color = "currentColor", strokeWidth = 2 },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(".arrow", { y: 4 }, { duration: 0.5 });
14      animate(".dash", { opacity: 0.5 }, { duration: 0.5 });
15    };
16 
17    const stop = async () => {
18      animate(".arrow", { y: 0 }, { duration: 0.3 });
19      animate(".dash", { opacity: 1 }, { duration: 0.3 });
20    };
21 
22    useImperativeHandle(ref, () => {
23      return {
24        startAnimation: start,
25        stopAnimation: stop,
26      };
27    });
28 
29    const handleHoverStart = () => {
30      start();
31    };
32 
33    const handleHoverEnd = () => {
34      stop();
35    };
36 
37    return (
38      <motion.svg
39        ref={scope}
40        onHoverStart={handleHoverStart}
41        onHoverEnd={handleHoverEnd}
42        xmlns="http://www.w3.org/2000/svg"
43        width={size}
44        height={size}
45        viewBox="0 0 24 24"
46        fill="none"
47        stroke="currentColor"
48        strokeWidth={strokeWidth}
49        strokeLinecap="round"
50        strokeLinejoin="round"
51        color={color}
52        className={`cursor-pointer ${className}`}
53      >
54        <motion.path
55          className="arrow"
56          d="M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V9a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z"
57        />
58        <motion.path className="dash" d="M9 4h6" />
59      </motion.svg>
60    );
61  },
62);
63 
64ArrowBigDownDashIcon.displayName = "ArrowBigDownDashIcon";
65 
66export default ArrowBigDownDashIcon;