Skip to content

Add Chrome Icon#133

Merged
Abhijit-Jha merged 8 commits intoitshover:masterfrom
AnukarOP:master
Mar 28, 2026
Merged

Add Chrome Icon#133
Abhijit-Jha merged 8 commits intoitshover:masterfrom
AnukarOP:master

Conversation

@AnukarOP
Copy link
Copy Markdown
Contributor

@AnukarOP AnukarOP commented Mar 27, 2026

Added the Chrome browser icon.

Changes:

  • New icon: brand-chrome-icon.tsx
  • Updated index.ts and lib/icons.ts

Hover effect: rotates 90° with center pulse.

chrome.icon.mp4

Summary by CodeRabbit

  • New Features
    • Added a Chrome brand icon to the icon library. It includes hover-triggered animation, an interactive cursor, and configurable appearance for seamless use in UIs.
  • Chores
    • Icon registry and catalog updated so the new brand icon is discoverable and available for use.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 27, 2026

@AnukarOP is attempting to deploy a commit to the itshover-oss Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 27, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 86f492c8-9e21-4b2b-968e-faaee6044306

📥 Commits

Reviewing files that changed from the base of the PR and between 70c1e0c and c021e0c.

📒 Files selected for processing (1)
  • icons/brand-chrome-icon.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • icons/brand-chrome-icon.tsx

📝 Walkthrough

Walkthrough

Adds a new ref-forwarding client React icon component BrandChromeIcon with hover-triggered scale and rotation animations (exposed via imperative methods), and registers the icon in icon exports, public registry artifacts, and the library manifest.

Changes

Cohort / File(s) Summary
Chrome Icon Component
icons/brand-chrome-icon.tsx
New client-side forwardRef React component BrandChromeIcon using motion/react's useAnimate. Defines start/stop animations for .chrome-center (scale) and .chrome-rotator (rotation), wires useImperativeHandle to expose startAnimation/stopAnimation, and triggers on onHoverStart/onHoverEnd. Props: size, color, strokeWidth, className.
Icon Index & Exports
icons/index.ts, lib/icons.ts
Imported and registered BrandChromeIcon in ICON_LIST; appended { name: "brand chrome icon", path: "/icons/brand-chrome-icon" } to exported ICONS.
Registry / Manifest Files
public/r/brand-chrome-icon.json, public/r/registry.json, registry.json
Added registry metadata for brand-chrome-icon (type registry:ui) referencing icons/brand-chrome-icon.tsx and icons/types.ts; lists motion as a runtime dependency.
Shared Types (registry)
icons/types.ts
Added type definitions referenced by the component: IconEasing, AnimatedIconProps (SVG props + size/color/strokeWidth/className), and AnimatedIconHandle (startAnimation/stopAnimation).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant User as "User (hover)"
  participant Icon as "BrandChromeIcon (component)"
  participant Motion as "motion/react (useAnimate)"
  participant Ref as "Ref consumer (start/stop API)"

  User->>Icon: onHoverStart
  Icon->>Motion: start() — animate .chrome-center (scale), .chrome-rotator (rotate)
  Motion-->>Icon: animations running
  User->>Icon: onHoverEnd
  Icon->>Motion: stop() — reset transforms
  Motion-->>Icon: animations stopped

  Ref->>Icon: call startAnimation()
  Icon->>Motion: start()
  Ref->>Icon: call stopAnimation()
  Icon->>Motion: stop()
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐇 I found a chrome circle, neat and round,
I nudged its center and it hummed without a sound,
On hover it swelled and then it spun,
I called its ref — the little dance begun. 🥕✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add Chrome Icon' directly and clearly describes the main change in the pull request, which is the creation and integration of a new Chrome browser icon component.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
public/r/brand-chrome-icon.json (1)

10-10: Add focus parity for hover-triggered animation.

On Line 10, the embedded component only uses onHoverStart/onHoverEnd. If this icon is used interactively, keyboard users won’t get the same animation feedback. Consider mirroring with onFocus/onBlur (or driving animation from the accessible parent control).

Suggested adjustment (inside icons/brand-chrome-icon.tsx)
-        onHoverStart={start}
-        onHoverEnd={stop}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        onFocus={start}
+        onBlur={stop}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@public/r/brand-chrome-icon.json` at line 10, The icon animation only triggers
on hover (onHoverStart/onHoverEnd) so keyboard users miss it; update the
motion.svg in BrandChromeIcon to also call the existing start and stop functions
on focus/blur (add onFocus={start} and onBlur={stop}) and ensure the SVG is
keyboard-focusable (e.g., add tabIndex={0} or appropriate focusable/role
attributes) so keyboard users get the same animation feedback; keep using the
start and stop functions defined in the component.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@public/r/brand-chrome-icon.json`:
- Line 10: The icon animation only triggers on hover (onHoverStart/onHoverEnd)
so keyboard users miss it; update the motion.svg in BrandChromeIcon to also call
the existing start and stop functions on focus/blur (add onFocus={start} and
onBlur={stop}) and ensure the SVG is keyboard-focusable (e.g., add tabIndex={0}
or appropriate focusable/role attributes) so keyboard users get the same
animation feedback; keep using the start and stop functions defined in the
component.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a9cfc875-e48a-49ff-b884-ba0642fb4b57

📥 Commits

Reviewing files that changed from the base of the PR and between f60946e and bab7eab.

📒 Files selected for processing (1)
  • public/r/brand-chrome-icon.json

@Abhijit-Jha
Copy link
Copy Markdown
Member

Hey,

Please fix the formating issue

@AnukarOP
Copy link
Copy Markdown
Contributor Author

Hey,

Please fix the formating issue

Hello,

I fixed it!

Thanks,

@Abhijit-Jha Abhijit-Jha merged commit 06212ff into itshover:master Mar 28, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants