brand-anthropic-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandAnthropicIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = useCallback(() => {
10      // Simple scale pulse on the slash
11      animate(
12        ".anthropic-i",
13        { rotateX: 22, skewX: -22, scaleY: 1.09 },
14        { duration: 0.2, ease: "easeInOut" },
15      );
16    }, [animate]);
17 
18    const stop = useCallback(() => {
19      animate(
20        ".anthropic-i",
21        { rotateX: 0, skewX: 0, scaleY: 1 },
22        { duration: 0.2 },
23      );
24    }, [animate]);
25 
26    useImperativeHandle(
27      ref,
28      () => ({
29        startAnimation: start,
30        stopAnimation: stop,
31      }),
32      [start, stop],
33    );
34 
35    return (
36      <motion.svg
37        ref={scope}
38        width={size}
39        height={size}
40        viewBox="0 0 24 24"
41        fill={color}
42        className={className}
43        xmlns="http://www.w3.org/2000/svg"
44        onHoverStart={start}
45        onHoverEnd={stop}
46      >
47        <title>Anthropic</title>
48 
49        {/* A */}
50        <motion.g
51          className="anthropic-a"
52          style={{ transformBox: "fill-box", transformOrigin: "center" }}
53        >
54          <path d="M6.57 3.52h3.767L16.906 20h-3.674l-1.343-3.461H5.017L3.673 20H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
55        </motion.g>
56 
57        {/* Backslash */}
58        <motion.g
59          className="anthropic-i"
60          style={{ transformBox: "fill-box", transformOrigin: "center" }}
61        >
62          <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48z" />
63        </motion.g>
64      </motion.svg>
65    );
66  },
67);
68 
69BrandAnthropicIcon.displayName = "BrandAnthropicIcon";
70export default BrandAnthropicIcon;