arrow-down-1-0-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowDown10Icon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const swapDistance = 10;
13 
14    const start = async () => {
15      animate(
16        ".one",
17        { y: swapDistance },
18        { duration: 0.3, ease: "easeInOut" },
19      );
20      animate(
21        ".zero",
22        { y: -swapDistance },
23        { duration: 0.3, ease: "easeInOut" },
24      );
25    };
26 
27    const stop = async () => {
28      animate(".one, .zero", { 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={color}
57        strokeWidth={strokeWidth}
58        strokeLinecap="round"
59        strokeLinejoin="round"
60        className={`cursor-pointer ${className}`}
61      >
62        <path d="m3 16 4 4 4-4" />
63        <path d="M7 20V4" />
64        <motion.g className="one">
65          <path d="M17 10V4h-2" />
66          <path d="M15 10h4" />
67        </motion.g>
68        <motion.rect
69          className="zero"
70          x="15"
71          y="14"
72          width="4"
73          height="6"
74          ry="2"
75        />
76      </motion.svg>
77    );
78  },
79);
80 
81ArrowDown10Icon.displayName = "ArrowDown10Icon";
82 
83export default ArrowDown10Icon;