arrow-down-0-1-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowDown01Icon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 40, className = "", color = "currentColor", strokeWidth = 2 },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const swapDistance = 10;
13 
14    const start = async () => {
15      animate(
16        ".zero",
17        { y: swapDistance },
18        { duration: 0.3, ease: "easeInOut" },
19      );
20      animate(
21        ".one",
22        { y: -swapDistance },
23        { duration: 0.3, ease: "easeInOut" },
24      );
25    };
26 
27    const stop = async () => {
28      animate(".zero, .one", { y: 0 }, { duration: 0.3, ease: "easeInOut" });
29    };
30 
31    useImperativeHandle(ref, () => {
32      return {
33        startAnimation: start,
34        stopAnimation: stop,
35      };
36    });
37 
38    const handleHoverStart = () => {
39      start();
40    };
41 
42    const handleHoverEnd = () => {
43      stop();
44    };
45 
46    return (
47      <motion.svg
48        ref={scope}
49        onHoverStart={handleHoverStart}
50        onHoverEnd={handleHoverEnd}
51        xmlns="http://www.w3.org/2000/svg"
52        width={size}
53        height={size}
54        viewBox="0 0 24 24"
55        fill="none"
56        stroke="currentColor"
57        strokeWidth={strokeWidth}
58        strokeLinecap="round"
59        strokeLinejoin="round"
60        color={color}
61        className={`cursor-pointer ${className}`}
62      >
63        <path d="m3 16 4 4 4-4" />
64        <path d="M7 20V4" />
65        <motion.rect
66          className="zero"
67          x="15"
68          y="4"
69          width="4"
70          height="6"
71          ry="2"
72        />
73        <motion.g className="one">
74          <path d="M17 20v-6h-2" />
75          <path d="M15 20h4" />
76        </motion.g>
77      </motion.svg>
78    );
79  },
80);
81 
82ArrowDown01Icon.displayName = "ArrowDown01Icon";
83 
84export default ArrowDown01Icon;