chevrons-up-down-icon

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