lib/icons.ts (1)

666-693: Consider maintaining alphabetical order for consistency.

The new icon entries are correctly structured, but they're appended at the end rather than inserted alphabetically like the existing entries. This is a minor inconsistency that could affect maintainability as the list grows.

♻️ Suggested alphabetical placement

The icons could be inserted at their alphabetically correct positions:

• cursor ide icon → after "currency-rupee-icon"
• gemini icon → after "gauge-icon"
• golang icon → after "gmail-icon"
• grok icon → after "globe-icon"
• notion icon → after "nodejs-icon"
• qwen icon → after "qrcode-icon"
• railway icon → after "rainbow-icon"

icons/railway-icon.tsx (1)

45-55: Comment/className mismatch may cause confusion.

The comments describe "Outer shell" and "Inner moving track" but the classNames are reversed (railway-inner for outer, railway-outer for inner). While this doesn't affect functionality since these classes aren't used in the animation selectors, it could confuse future maintainers.

icons/gemini-icon.tsx (1)

50-79: Rotation/scale may need explicit SVG transform origin to look right.
For consistent “spin around center” behavior across browsers, consider adding transformBox/transformOrigin (or Motion equivalents) on the <motion.svg>.

Possible adjustment

       <motion.svg
         ref={scope}
         onHoverStart={start}
         onHoverEnd={stop}
         fill={color}
         viewBox="0 0 24 24"
         height={size}
         width={size}
-        style={{ flex: "none", lineHeight: 1 }}
+        style={{
+          flex: "none",
+          lineHeight: 1,
+          transformBox: "fill-box",
+          transformOrigin: "center",
+        }}
         xmlns="http://www.w3.org/2000/svg"
         className={className}
       >

icons/golang-icon.tsx (1)

34-62: Consider adding a <title> (or mark as decorative) for consistency.
Other new icons include <title>…</title>; this one doesn’t. Either add a title or explicitly set aria-hidden if icons are decorative in your UI.

public/r/gemini-icon.json (1)

1-20: If you change GeminiIcon animation scoping, mirror it here (or generate this JSON).
Right now this registry item will keep any selector-scoping issues even if the TSX file is later improved.

public/r/qwen-icon.json (1)

1-20: QwenIcon registry entry inherits the same selector-scoping/transform-origin concerns.
If you decide to harden Gemini’s implementation (scoped selectors + explicit origin), consider applying the same pattern here for consistency.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

icons/railway-icon.tsx (1)

9-22: Consider adding defensive null checks for scope.current.

If startAnimation or stopAnimation are called imperatively via the ref handle before the component mounts, scope.current will be null, potentially causing a runtime error. Consider adding a guard:

🛡️ Defensive fix

 const start = useCallback(() => {
+  if (!scope.current) return;
   animate(
     scope.current,
     {
       x: [0, -2, 2, -2, 0],
       y: [0, 1, -1, 1, 0],
     },
     { duration: 0.25, repeat: 1 },
   );
 }, [animate, scope]);

 const stop = useCallback(() => {
+  if (!scope.current) return;
   animate(scope.current, { x: 0, y: 0 }, { duration: 0.15 });
 }, [animate, scope]);

icons/cursor-ide-icon.tsx (2)

12-25: Consider adding defensive null checks for scope.current.

Same consideration as RailwayIcon: if animation methods are called imperatively before mount, scope.current will be null.

🛡️ Defensive fix

 const start = useCallback(() => {
+  if (!scope.current) return;
   animate(
     scope.current,
     {
       x: [0, -1, 1, -1, 0],
       y: [0, 1, -1, 1, 0],
     },
     { duration: 0.25, repeat: 1 },
   );
 }, [animate, scope]);

 const stop = useCallback(() => {
+  if (!scope.current) return;
   animate(scope.current, { x: 0, y: 0 }, { duration: 0.15 });
 }, [animate, scope]);

---

49-50: Verify whether strokeWidth is actually used.

The stroke and strokeWidth attributes are applied to the SVG, but the path appears to use fill-based rendering. If the icon doesn't require stroke styling, these attributes (and the strokeWidth prop) might be unnecessary.

If stroke is not needed, consider this cleanup:

♻️ Optional cleanup if stroke is unused

Remove from props:

   (
-    { size = 24, color = "currentColor", strokeWidth = 1, className = "" },
+    { size = 24, color = "currentColor", className = "" },
     ref,
   ) => {

Remove from SVG attributes:

       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      stroke={color}
-      strokeWidth={strokeWidth}
     >

And remove strokeWidth from AnimatedIconProps in types.ts if no other icons use it.

public/r/notion-icon.json (1)

1-20: LGTM! Registry correctly configured, and the embedded component shows a nice pattern.

The registry metadata is properly structured. Notably, the NotionIcon implementation (visible in the embedded content) uses class selectors (.notion-letter, .notion-shell) to animate specific SVG paths independently, which is a cleaner approach than animating the entire scope when you need fine-grained control over multiple elements.

Consider applying the class-selector animation pattern from NotionIcon to other icons if they need to animate multiple elements with different timing or properties. This approach:

• Avoids needing to pass scope.current explicitly
• Makes it clearer which elements are being animated
• Allows independent animation of different parts

Example from NotionIcon:

const start = useCallback(() => {
  animate(".notion-letter", { scale: 1.1 }, { duration: 0.2 });
  animate(".notion-shell", { opacity: 0.7 }, { duration: 0.2 });
}, [animate]);

icons/gemini-icon.tsx (2)

6-6: Inconsistent prop destructuring with AnimatedIconProps interface.

The component doesn't destructure strokeWidth from props, but AnimatedIconProps includes it. Since GeminiIcon uses fill rather than stroke, strokeWidth isn't applicable here. Consider either:

• Destructuring strokeWidth (even if unused) for API consistency, or
• Adding a comment explaining why it's omitted for fill-based icons.

♻️ Option 1: Accept strokeWidth for consistency

-  ({ size = 24, color = "currentColor", className = "" }, ref) => {
+  ({ size = 24, color = "currentColor", strokeWidth, className = "" }, ref) => {

---

54-66: Consider adding cursor-pointer class for consistency.

The GolangIcon component includes cursor-pointer in its className (see golang-icon.tsx line 52), but GeminiIcon doesn't. Since the icon responds to hover interactions, adding a pointer cursor would provide consistent visual feedback across all animated icons.

♻️ Add cursor-pointer class

-        className={className}
+        className={`cursor-pointer ${className}`}

icons/qwen-icon.tsx (1)

45-60: Add cursor-pointer for interactive feedback.

Similar to GeminiIcon, QwenIcon lacks the cursor-pointer class present in GolangIcon. For consistency and better UX on hover-interactive icons, consider adding it.

♻️ Add cursor-pointer class

-        className={className}
+        className={`cursor-pointer ${className}`}

icons/grok-icon.tsx (4)

54-66: Make the scale animation deterministic by pinning SVG transform origin.

Depending on browser/SVG defaults, scaling the <svg> can appear to shift position. Setting transformOrigin (and, for SVG, transformBox) makes the “collapse into core” effect consistent.

Proposed patch

       <motion.svg
         ref={scope}
         onHoverStart={start}
         onHoverEnd={stop}
         fill={color}
         fillRule="evenodd"
         viewBox="0 0 24 24"
         height={size}
         width={size}
-        style={{ flex: "none", lineHeight: 1 }}
+        style={{
+          flex: "none",
+          lineHeight: 1,
+          transformOrigin: "50% 50%",
+          transformBox: "fill-box",
+        }}
         xmlns="http://www.w3.org/2000/svg"
         className={className}
       >

---

53-68: Add a11y hooks (aria-label / aria-hidden) instead of relying on <title> alone.

As-is, consumers can’t easily control whether this SVG is decorative vs. meaningful (and <title> behavior is inconsistent across AT/browsers). Consider either passing through SVG props or adding an ariaLabel prop and defaulting to aria-hidden when absent.

---

58-82: Consider moving fillRule="evenodd" to the <path> for clarity. (developer.mozilla.org)

fill-rule is inherited as a CSS property, but the attribute is typically applied on the shape element; putting it on the <motion.path> makes the intent unambiguous (especially if more shapes get added later).

Proposed patch

-        fillRule="evenodd"
+        fillRule="evenodd"
         viewBox="0 0 24 24"
@@
         <motion.path
           className="grok-shape"
+          fillRule="evenodd"
           d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"
         />

---

9-42: Avoid stacking overlapping animations on rapid hover in/out by storing and stopping previous animation controls.

Each start()/stop() call fires new animations without stopping prior ones. Rapid hover jitter can accumulate on the spring scale and opacity tweens. Motion's animate() returns AnimationControls with a .stop() method—store the main scale animation control in a ref and call .stop() before triggering a new animation sequence.

Proposed patch (track controls and stop before starting new)

-import { forwardRef, useImperativeHandle, useCallback } from "react";
+import { forwardRef, useImperativeHandle, useCallback, useRef } from "react";
 import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
 import { motion, useAnimate } from "motion/react";

 const GrokIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   ({ size = 24, color = "currentColor", className = "" }, ref) => {
     const [scope, animate] = useAnimate();
+    const controlsRef = useRef<{ stop: () => void } | null>(null);

     const start = useCallback(() => {
+      controlsRef.current?.stop();
       // Compress the whole icon into the core
-      animate(
+      const controls = animate(
         scope.current,
         { scale: 0.45 },
         { type: "spring", stiffness: 300, damping: 25 },
       );
+      controlsRef.current = controls;

       // Fade out Grok shape
       animate(
         ".grok-shape",
         { opacity: 0 },
         { duration: 0.25, ease: "easeOut" },
       );

       // Fade in core
       animate(
         ".grok-core",
         { opacity: 1 },
         { duration: 0.25, ease: "easeOut" },
       );
     }, [animate, scope]);

     const stop = useCallback(() => {
+      controlsRef.current?.stop();
       // Spring back to full size
-      animate(
+      const controls = animate(
         scope.current,
         { scale: 1 },
         { type: "spring", stiffness: 260, damping: 18 },
       );
+      controlsRef.current = controls;

       animate(".grok-shape", { opacity: 1 }, { duration: 0.2 });
       animate(".grok-core", { opacity: 0 }, { duration: 0.2 });
     }, [animate, scope]);

Configuration used: defaults

Review profile: CHILL

Plan: Pro

icons/gemini-icon.tsx (1)

9-23: Avoid overlapping animations + guard scope.current (quick hover in/out can stack)

Right now start() / stop() can fire back-to-back and enqueue multiple animate() calls. Consider cancelling the prior animation and no-op’ing if the ref isn’t set (depending on motion/[email protected]’s animate() return type).

Proposed tweak (if animate() returns stoppable controls in your Motion version)

-import { forwardRef, useImperativeHandle, useCallback } from "react";
+import { forwardRef, useImperativeHandle, useCallback, useRef } from "react";
 import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
 import { motion, useAnimate } from "motion/react";

 const GeminiIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   ({ size = 24, color = "currentColor", className = "" }, ref) => {
     const [scope, animate] = useAnimate();
+    const controlsRef = useRef<{ stop?: () => void } | null>(null);

     const start = useCallback(() => {
-      animate(
-        scope.current,
+      if (!scope.current) return;
+      controlsRef.current?.stop?.();
+      controlsRef.current = animate(
+        scope.current,
         { scale: [1, 1.08, 1], rotate: [0, 8, 0] },
         { duration: 0.6, ease: "easeInOut" },
       );
     }, [animate, scope]);

     const stop = useCallback(() => {
-      animate(
-        scope.current,
+      if (!scope.current) return;
+      controlsRef.current?.stop?.();
+      controlsRef.current = animate(
+        scope.current,
         { scale: 1, rotate: 0 },
         { duration: 0.3, ease: "easeOut" },
       );
     }, [animate, scope]);

icons/qwen-icon.tsx (1)

9-16: Consider extracting animation parameters as constants.

The rotation and scale keyframes are hardcoded. For better maintainability and consistency across icon components, consider extracting these values:

const WOBBLE_ROTATION = [0, -8, 8, -4, 4, 0];
const WOBBLE_SCALE = [1, 1.05, 1];
const WOBBLE_DURATION = 0.6;

This makes it easier to adjust animation behavior and maintain consistency with other icons.

Additionally, based on the PR discussion, animation consistency across icons is being evaluated. Verify that this wobble animation aligns with the final decision for icon animation patterns.

icons/grok-icon.tsx (1)

35-57: Consider adding aria-hidden if the icon is purely decorative.

If the icon is used alongside text labels or is purely decorative, adding aria-hidden="true" to the SVG can improve accessibility by preventing screen readers from announcing redundant content. The <title> element is already present, which is good for standalone usage.

♻️ Optional: Add aria-hidden support

If you want to support both decorative and semantic modes, consider:

 const GrokIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
-  ({ size = 24, color = "currentColor", className = "" }, ref) => {
+  ({ size = 24, color = "currentColor", className = "", "aria-hidden": ariaHidden }, ref) => {
     const [scope, animate] = useAnimate();
     
     // ... animation code ...

     return (
       <motion.svg
         ref={scope}
         onHoverStart={start}
         onHoverEnd={stop}
         fill={color}
         fillRule="evenodd"
         viewBox="0 0 24 24"
         height={size}
         width={size}
         style={{ flex: "none", lineHeight: 1 }}
         xmlns="http://www.w3.org/2000/svg"
         className={className}
+        aria-hidden={ariaHidden}
       >
         <title>Grok</title>

And update the types to include aria-hidden?: boolean in AnimatedIconProps.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

icons/grok-icon.tsx (2)

48-51: Add dependency array to useImperativeHandle.

Missing dependency array causes the handle to be recreated on every render. For consistency with gemini-icon.tsx and to avoid unnecessary updates:

Suggested fix

-    useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       startAnimation: start,
       stopAnimation: stop,
-    }));
+    }), [start, stop]);

---

53-65: Add role and aria-label for consistent accessibility.

Unlike gemini-icon.tsx, this component is missing role="img" and aria-label. For consistency across the icon suite and better screen reader support:

Suggested fix

       <motion.svg
         ref={scope}
         onHoverStart={start}
         onHoverEnd={stop}
         fill={color}
         viewBox="0 0 24 24"
         width={size}
         height={size}
         className={className}
+        role="img"
+        aria-label="Grok"
         style={{ flex: "none", lineHeight: 1 }}
       >

Configuration used: defaults

Review profile: CHILL

Plan: Pro