brand-google-icon

1"use client";
2import { forwardRef, useImperativeHandle } from "react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4import { motion, useAnimate } from "motion/react";
5 
6const BrandGoogleIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
7  ({ size = 24, color = "currentColor", className = "" }, ref) => {
8    const [scope, animate] = useAnimate();
9 
10    const start = async () => {
11      await animate(
12        ".google-g",
13        {
14          rotate: [0, -10, 10, -5, 0],
15          scale: [1, 1.05, 1],
16        },
17        {
18          duration: 0.6,
19          ease: "easeInOut",
20        },
21      );
22    };
23 
24    const stop = async () => {
25      animate(
26        ".google-g",
27        {
28          rotate: 0,
29          scale: 1,
30        },
31        {
32          duration: 0.3,
33          ease: "easeInOut",
34        },
35      );
36    };
37 
38    useImperativeHandle(ref, () => {
39      return {
40        startAnimation: start,
41        stopAnimation: stop,
42      };
43    });
44 
45    const handleHoverStart = () => {
46      start();
47    };
48 
49    const handleHoverEnd = () => {
50      stop();
51    };
52 
53    return (
54      <motion.svg
55        ref={scope}
56        xmlns="http://www.w3.org/2000/svg"
57        width={size}
58        height={size}
59        viewBox="0 0 24 24"
60        fill={color}
61        className={`cursor-pointer ${className}`}
62        onHoverStart={handleHoverStart}
63        onHoverEnd={handleHoverEnd}
64      >
65        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
66 
67        <motion.path
68          d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z"
69          className="google-g"
70          style={{ transformOrigin: "50% 50%" }}
71        />
72      </motion.svg>
73    );
74  },
75);
76 
77BrandGoogleIcon.displayName = "BrandGoogleIcon";
78 
79export default BrandGoogleIcon;