brand-paypal-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandPaypalIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(".p-back", { x: 2, y: -2 }, { duration: 0.3, ease: "easeOut" });
14      await animate(
15        ".p-front",
16        { x: -2, y: 2 },
17        { duration: 0.3, ease: "easeOut" },
18      );
19      animate(".p-back", { x: 0, y: 0 }, { duration: 0.3, ease: "easeIn" });
20      animate(".p-front", { x: 0, y: 0 }, { duration: 0.3, ease: "easeIn" });
21    };
22 
23    const stop = () => {
24      animate(".p-back", { x: 0, y: 0 }, { duration: 0.2 });
25      animate(".p-front", { x: 0, y: 0 }, { duration: 0.2 });
26    };
27 
28    useImperativeHandle(ref, () => {
29      return {
30        startAnimation: start,
31        stopAnimation: stop,
32      };
33    });
34 
35    const handleHoverStart = () => {
36      start();
37    };
38 
39    const handleHoverEnd = () => {
40      stop();
41    };
42 
43    return (
44      <motion.svg
45        ref={scope}
46        onHoverStart={handleHoverStart}
47        onHoverEnd={handleHoverEnd}
48        xmlns="http://www.w3.org/2000/svg"
49        width={size}
50        height={size}
51        viewBox="0 0 24 24"
52        fill="none"
53        stroke={color}
54        strokeWidth={strokeWidth}
55        strokeLinecap="round"
56        strokeLinejoin="round"
57        className={`cursor-pointer ${className}`}
58      >
59        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
60        <motion.path
61          className="p-front"
62          d="M10 13l2.5 0c2.5 0 5 -2.5 5 -5c0 -3 -1.9 -5 -5 -5h-5.5c-.5 0 -1 .5 -1 1l-2 14c0 .5 .5 1 1 1h2.8l1.2 -5c.1 -.6 .4 -1 1 -1"
63        />
64        <motion.path
65          className="p-back"
66          d="M17.5 7.2c1.7 1 2.5 2.8 2.5 4.8c0 2.5 -2.5 4.5 -5 4.5h-2.6l-.6 3.6a1 1 0 0 1 -1 .8l-2.7 0a.5 .5 0 0 1 -.5 -.6l.2 -1.4"
67        />
68      </motion.svg>
69    );
70  },
71);
72 
73BrandPaypalIcon.displayName = "BrandPaypalIcon";
74 
75export default BrandPaypalIcon;