Skip to content

Instantly share code, notes, and snippets.

@Jensderond
Last active March 2, 2021 16:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jensderond/a47e06842c67ac252f52cb2e69c04868 to your computer and use it in GitHub Desktop.
Save Jensderond/a47e06842c67ac252f52cb2e69c04868 to your computer and use it in GitHub Desktop.
React Animated Chevron to Close icon using Framer motion
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>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment