React Animated Chevron to Close icon using Framer motion

animated-chevron-left.tsx

function AnimatedChevronLeft(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="1em"
      height="1em"
      {...props}
    >
      <motion.path
        fill="currentColor"
        stroke="currentColor"
        strokeWidth="2"
        variants={{
          closed: {
            d: 'M11 12L22 2',
          },
          open: {
            d: 'M2 22L22 2',
          },
        }}
      />
      <motion.path
        fill="currentColor"
        stroke="currentColor"
        strokeWidth="2"
        variants={{
          closed: {
            d: 'M22 22L11 11',
          },
          open: {
            d: 'M22 22L2 2',
          },
        }}
      />
    </svg>
  );
}