brand-chrome-icon

1"use client";
2import { forwardRef, useImperativeHandle } from "react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4import { motion, useAnimate } from "motion/react";
5 
6const BrandChromeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
7  (
8    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
9    ref,
10  ) => {
11    const [scope, animate] = useAnimate();
12 
13    const start = () => {
14      animate(".chrome-center", { scale: [1, 1.15, 1] }, { duration: 0.3 });
15      animate(
16        ".chrome-rotator",
17        { rotate: 90 },
18        { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
19      );
20    };
21 
22    const stop = () => {
23      animate(".chrome-rotator", { rotate: 0 }, { duration: 0.3 });
24      animate(".chrome-center", { scale: 1 }, { duration: 0.2 });
25    };
26 
27    useImperativeHandle(ref, () => ({
28      startAnimation: start,
29      stopAnimation: stop,
30    }));
31 
32    return (
33      <motion.svg
34        ref={scope}
35        onHoverStart={start}
36        onHoverEnd={stop}
37        xmlns="http://www.w3.org/2000/svg"
38        width={size}
39        height={size}
40        viewBox="0 0 24 24"
41        fill="none"
42        stroke={color}
43        strokeWidth={strokeWidth}
44        strokeLinecap="round"
45        strokeLinejoin="round"
46        className={`cursor-pointer ${className}`}
47      >
48        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
49        <motion.g
50          className="chrome-rotator"
51          style={{ transformOrigin: "center" }}
52        >
53          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
54          <path d="M12 9h8.4" />
55          <path d="M14.598 13.5l-4.2 7.275" />
56          <path d="M9.402 13.5l-4.2 -7.275" />
57          <circle
58            cx="12"
59            cy="12"
60            r="3"
61            stroke="none"
62            className="fill-background"
63          />
64          <motion.path
65            className="chrome-center"
66            d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
67            style={{ transformOrigin: "center" }}
68          />
69        </motion.g>
70      </motion.svg>
71    );
72  },
73);
74 
75BrandChromeIcon.displayName = "BrandChromeIcon";
76 
77export default BrandChromeIcon;