brand-stripe-icon

1import { forwardRef, useImperativeHandle, useId } from "react";
2import { motion, useAnimate } from "motion/react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4 
5const BrandStripeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11    const id = useId();
12    const clipId = `fillClip-${id.replace(/:/g, "")}`;
13 
14    const start = async () => {
15      await animate(
16        ".fill-rect",
17        {
18          y: [-2, 26],
19        },
20        { duration: 1.4, ease: "easeInOut" },
21      );
22    };
23 
24    const stop = () => {
25      animate(".fill-rect", { y: -2 }, { duration: 0.3, ease: "easeOut" });
26    };
27 
28    useImperativeHandle(ref, () => ({
29      startAnimation: start,
30      stopAnimation: stop,
31    }));
32 
33    return (
34      <motion.svg
35        ref={scope}
36        onHoverStart={start}
37        onHoverEnd={stop}
38        xmlns="http://www.w3.org/2000/svg"
39        width={size}
40        height={size}
41        viewBox="0 0 24 24"
42        fill="none"
43        strokeWidth={strokeWidth}
44        strokeLinecap="round"
45        strokeLinejoin="round"
46        className={`cursor-pointer select-none ${className}`}
47      >
48        <defs>
49          <clipPath id={clipId}>
50            <motion.rect
51              className="fill-rect"
52              x="0"
53              y="-2"
54              width="24"
55              height="2"
56            />
57          </clipPath>
58        </defs>
59 
60        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
61 
62        <path
63          d="M11.453 8.056c0 -.623 .518 -.979 1.442 -.979c1.69 0 3.41 .343 4.605 .923l.5 -4c-.948 -.449 -2.82 -1 -5.5 -1c-1.895 0 -3.373 .087 -4.5 1c-1.172 .956 -2 2.33 -2 4c0 3.03 1.958 4.906 5 6c1.961 .69 3 .743 3 1.5c0 .735 -.851 1.5 -2 1.5c-1.423 0 -3.963 -.609 -5.5 -1.5l-.5 4c1.321 .734 3.474 1.5 6 1.5c2 0 3.957 -.468 5.084 -1.36c1.263 -.979 1.916 -2.268 1.916 -4.14c0 -3.096 -1.915 -4.547 -5 -5.637c-1.646 -.605 -2.544 -1.07 -2.544 -1.807l-.003 0"
64          stroke={color}
65          fill="none"
66        />
67 
68        <motion.path
69          className="stripe-filled"
70// … truncated