brand-qwen-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandQwenIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = useCallback(() => {
10      // Wobble animation: slight rotation back and forth with scale pulse
11      animate(
12        scope.current,
13        { rotate: [0, -8, 8, -4, 4, 0], scale: [1, 1.05, 1] },
14        { duration: 0.6, ease: "easeInOut" },
15      );
16    }, [animate, scope]);
17 
18    const stop = useCallback(() => {
19      animate(
20        scope.current,
21        { rotate: 0, scale: 1 },
22        { duration: 0.2, ease: "easeOut" },
23      );
24    }, [animate, scope]);
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        onHoverStart={start}
39        onHoverEnd={stop}
40        fill={color}
41        fillRule="evenodd"
42        viewBox="0 0 24 24"
43        height={size}
44        width={size}
45        style={{ flex: "none", lineHeight: 1 }}
46        xmlns="http://www.w3.org/2000/svg"
47        className={`qwen-icon cursor-pointer ${className}`}
48      >
49        <title>Qwen</title>
50 
51        {/* Complete Qwen logo with evenodd fill rule for hollow center */}
52        <motion.path
53          className="qwen-shape"
54// … truncated