arrow-big-up-dash-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowBigUpDashIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(".arrow", { y: -4 }, { duration: 0.3, ease: "easeOut" });
14      animate(
15        ".dash",
16        { scale: 1.2, opacity: 0.7 },
17        { duration: 0.3, ease: "easeOut" },
18      );
19    };
20 
21    const stop = () => {
22      animate(".arrow", { y: 0 }, { duration: 0.2, ease: "easeInOut" });
23      animate(
24        ".dash",
25        { scale: 1, opacity: 1 },
26        { duration: 0.2, ease: "easeInOut" },
27      );
28    };
29 
30    useImperativeHandle(ref, () => {
31      return {
32        startAnimation: start,
33        stopAnimation: stop,
34      };
35    });
36 
37    const handleHoverStart = () => {
38      start();
39    };
40 
41    const handleHoverEnd = () => {
42      stop();
43    };
44 
45    return (
46      <motion.svg
47        ref={scope}
48        onHoverStart={handleHoverStart}
49        onHoverEnd={handleHoverEnd}
50        xmlns="http://www.w3.org/2000/svg"
51        width={size}
52        height={size}
53        viewBox="0 0 24 24"
54        fill="none"
55        stroke={color}
56        strokeWidth={strokeWidth}
57        strokeLinecap="round"
58        strokeLinejoin="round"
59        className={`cursor-pointer ${className}`}
60      >
61        <motion.path
62          className="arrow"
63          d="M9 13a1 1 0 0 0-1-1H5.061a1 1 0 0 1-.75-1.811l6.836-6.835a1.207 1.207 0 0 1 1.707 0l6.835 6.835a1 1 0 0 1-.75 1.811H16a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"
64        />
65        <motion.path
66          className="dash"
67          style={{ transformOrigin: "12px 20px" }}
68          d="M9 20h6"
69        />
70      </motion.svg>
71    );
72  },
73);
74 
75ArrowBigUpDashIcon.displayName = "ArrowBigUpDashIcon";
76 
77export default ArrowBigUpDashIcon;