chevrons-up-down-icon

1"use client"
2 
3import { useImperativeHandle } from "react"
4import { motion, useAnimation } from "motion/react"
5 
6export type ChevronsUpDownIconHandle = {
7  startAnimation: () => void
8  stopAnimation: () => void
9}
10 
11export type ChevronsUpDownIconProps = React.ComponentPropsWithoutRef<"svg"> & {
12  ref?: React.Ref<ChevronsUpDownIconHandle>
13  duration?: number
14}
15 
16export function ChevronsUpDownIcon({
17  ref,
18  duration = 0.3,
19  ...props
20}: ChevronsUpDownIconProps) {
21  const controls = useAnimation()
22 
23  useImperativeHandle(ref, () => {
24    return {
25      startAnimation: () => controls.start("animate"),
26      stopAnimation: () => controls.start("normal"),
27    }
28  })
29 
30  return (
31    <svg
32      xmlns="http://www.w3.org/2000/svg"
33      width="24"
34      height="24"
35      viewBox="0 0 24 24"
36      fill="none"
37      stroke="currentColor"
38      strokeWidth="2"
39      strokeLinecap="round"
40      strokeLinejoin="round"
41      aria-hidden
42      {...props}
43    >
44      <motion.path
45        d="M7 15L12 20L17 15"
46        variants={{
47          normal: {
48            d: "M7 15L12 20L17 15",
49          },
50          animate: {
51            d: "M7 20L12 15L17 20",
52          },
53        }}
54        initial="normal"
55        animate={controls}
56        transition={{
57          duration,
58        }}
59      />
60      <motion.path
61        d="M7 9L12 4L17 9"
62        variants={{
63          normal: {
64            d: "M7 9L12 4L17 9",
65          },
66          animate: {
67            d: "M7 4L12 9L17 4",
68          },
69        }}
70        initial="normal"
71        animate={controls}
72        transition={{
73          duration,
74        }}
75      />
76    </svg>
77  )
78}