brand-gemini-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandGeminiIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = useCallback(() => {
10      animate(
11        scope.current,
12        { scale: 0.9, rotate: [0, 180] },
13        {
14          duration: 0.8,
15          ease: "easeInOut",
16        },
17      );
18    }, [animate, scope]);
19 
20    const stop = useCallback(() => {
21      animate(
22        scope.current,
23        { scale: 1, rotate: 0 },
24        {
25          duration: 0.8,
26          ease: "easeInOut",
27        },
28      );
29    }, [animate, scope]);
30 
31    useImperativeHandle(
32      ref,
33      () => ({
34        startAnimation: start,
35        stopAnimation: stop,
36      }),
37      [start, stop],
38    );
39 
40    return (
41      <motion.svg
42        ref={scope}
43        onHoverStart={start}
44        onHoverEnd={stop}
45        fill={color}
46        viewBox="0 0 24 24"
47        height={size}
48        width={size}
49        xmlns="http://www.w3.org/2000/svg"
50        className={`gemini-icon cursor-pointer ${className}`}
51        role="img"
52        aria-label="Gemini"
53        style={{
54          flex: "none",
55          lineHeight: 1,
56          transformBox: "fill-box",
57          transformOrigin: "center",
58        }}
59      >
60        <title>Gemini</title>
61 
62        {/* Gemini star glyph */}
63        <motion.path
64          className="gemini-shape"
65          d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
66        />
67      </motion.svg>
68    );
69  },
70);
71 
72BrandGeminiIcon.displayName = "BrandGeminiIcon";
73export default BrandGeminiIcon;