Icon animation

App.tsx

import "./App.css";
import { motion } from "framer-motion";

function App() {
  return (
    <>
      <AnimatedPenIcon />
    </>
  );
}

export default App;

function AnimatedPenIcon() {
  return (
    <motion.svg
      xmlns="http://www.w3.org/2000/svg"
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      whileHover="hover"
    >
      <path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"></path>
      <path d="M2 6h4"></path>
      <path d="M2 10h4"></path>
      <path d="M2 14h4"></path>
      <path d="M2 18h4"></path>
      <motion.path
        d="M18.4 2.6a2.17 2.17 0 0 1 3 3L16 11l-4 1 1-4Z"
        variants={{
          hover: {
            pathLength: [1, 0, 1],
            transition: { duration: 1, ease: "easeInOut" },
          },
        }}
        initial={{ pathLength: 1 }}
      />
    </motion.svg>
  );
}