feat: add microphone, sun, cloud, wallet, calendar, and map-pin motion icons#55
feat: add microphone, sun, cloud, wallet, calendar, and map-pin motion icons#55Aaryyan777 wants to merge 2 commits intoitshover:masterfrom
Conversation
|
@Aaryyan777 is attempting to deploy a commit to the itshover's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds six new forwardRef React icon components (calendar, cloud, map-pin, microphone, sun, wallet) that use motion/react and useAnimate, expose imperative handles ( Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom Pre-merge checks in the settings. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @public/r/cloud-icon.json:
- Around line 9-11: The registry file's embedded component animates the wrong
selector and motion (it targets ".cloud" with vertical bounce), so update the
registry content to match the real icons/cloud-icon.tsx implementation: change
the animated selector to ".cloud-body" and reproduce the same animation
parameters (horizontal x translation of 5 and any wind-trail effects) used by
the real component, and ensure the exposed imperative handles (start, stop) and
motion usage in CloudIcon, including useAnimate, motion.g, and transformOrigin,
match the source module so the registry and icons/cloud-icon.tsx produce
identical behavior.
In @public/r/map-pin-icon.json:
- Around line 1-20: The registry copy of map-pin-icon.tsx is missing the
enhanced circle-fill animation and motion.circle wrapper; update the registry
file content to match the current source by adding the motion.circle element
with className "pin-circle", implement fill color animations in the start and
stop functions (animate ".pin-circle" fill to the hover color in start and
revert in stop), ensure useAnimate is used on the SVG ref and the existing
".pin" bounce animation remains, and keep the useImperativeHandle exports
(startAnimation, stopAnimation) and MapPinIcon forwardRef signature identical to
the source.
🧹 Nitpick comments (2)
icons/cloud-icon.tsx (2)
13-17: Redundant initialization:initialprops already set the same values.The
useEffectsets{ opacity: 0, x: -6 }on the wind trails, but lines 94, 99, and 104 already define these viainitial={{ opacity: 0, x: -6 }}. TheuseEffectcan be removed along with theuseEffectimport.🔎 Proposed fix
-import { forwardRef, useImperativeHandle, useEffect } from "react"; +import { forwardRef, useImperativeHandle } from "react"; import { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const CloudIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); - useEffect(() => { - animate(".wind-trail-1", { opacity: 0, x: -6 }, { duration: 0 }); - animate(".wind-trail-2", { opacity: 0, x: -6 }, { duration: 0 }); - animate(".wind-trail-3", { opacity: 0, x: -6 }, { duration: 0 }); - }, [animate]); - const start = async () => {
71-113: Minor pattern inconsistency: other icons usemotion.svgdirectly.This component wraps the SVG in a
motion.div, while other icons (SunIcon, CalendarIcon, etc.) applymotion.svgwith hover handlers directly. Both approaches work, but for consistency across the icon library, consider aligning with themotion.svgpattern.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
icons/calendar-icon.tsxicons/cloud-icon.tsxicons/index.tsicons/map-pin-icon.tsxicons/microphone-icon.tsxicons/sun-icon.tsxicons/wallet-icon.tsxlib/icons.tspublic/r/calendar-icon.jsonpublic/r/cloud-icon.jsonpublic/r/layout-sidebar-right-collapse-icon.jsonpublic/r/map-pin-icon.jsonpublic/r/microphone-icon.jsonpublic/r/registry.jsonpublic/r/sun-icon.jsonpublic/r/wallet-icon.jsonregistry.json
🔇 Additional comments (15)
public/r/layout-sidebar-right-collapse-icon.json (1)
10-10: LGTM!Formatting adjustment to the embedded component code. No functional changes.
icons/sun-icon.tsx (1)
1-60: LGTM!Clean implementation following the established pattern. The rotation and scale animation with
transformOrigin: "center"is appropriate for a sun icon.icons/calendar-icon.tsx (1)
1-117: LGTM!Well-implemented calendar icon with a pleasing shake animation and staggered dot blinking effect. The
transformOrigin: "top"makes the shake appear anchored at the calendar's hanging point.lib/icons.ts (1)
146-149: LGTM!The new icon entries for calendar, cloud, map-pin, microphone, and wallet follow the established naming and path conventions.
Also applies to: 186-189, 402-405, 410-413, 670-673
public/r/microphone-icon.json (1)
1-20: LGTM!The registry entry is well-structured with proper schema reference, dependencies, and file definitions. The embedded MicrophoneIcon component correctly implements the forwardRef pattern with imperative animation control.
icons/map-pin-icon.tsx (1)
1-62: LGTM!The MapPinIcon implementation is clean and follows the established pattern. The bounce animation with inner circle fill creates a nice visual effect matching the PR description.
icons/microphone-icon.tsx (1)
1-58: LGTM!The MicrophoneIcon correctly implements a shake/vibrate effect with oscillating rotation keyframes. The
transformOrigin: "center"ensures proper rotation behavior.public/r/sun-icon.json (1)
1-20: LGTM!The SunIcon registry entry is properly structured. The rotation and scale animation creates an effective "rotate and pulse" effect suitable for light-mode toggles as described.
public/r/wallet-icon.json (1)
1-20: LGTM!The WalletIcon registry entry is well-structured. The tilt and scale animation creates the described "pop effect" nicely.
icons/wallet-icon.tsx (1)
1-60: LGTM!The WalletIcon implementation is clean and consistent with the other animated icons. The tilt/scale animation with proper transform origin creates the intended pop effect.
public/r/calendar-icon.json (1)
1-20: Verify animation matches intended behavior.The CalendarIcon implementation animates the top calendar pins with a bounce effect (y: -2 → y: 0). However, the PR description mentions "gentle shake with sequential blinking dots inside." The current implementation doesn't include blinking dots.
Please confirm this is the intended animation behavior, or update the implementation/description to match.
public/r/registry.json (1)
738-754: LGTM! Registry entries are consistent and well-structured.All six new icon registry entries (calendar-icon, cloud-icon, map-pin-icon, microphone-icon, sun-icon, wallet-icon) follow the established pattern correctly:
- Each declares
"motion"as a dependency- Each references its corresponding icon component file and the shared types.ts
- Structure matches existing entries perfectly
Since this is an auto-generated file and the PR checklist confirms
npm run registry:buildpasses, these additions are correct.Also applies to: 942-958, 1996-2012, 2047-2063, 2761-2777, 3118-3134
registry.json (1)
738-754: LGTM! Identical to public/r/registry.json.The registry entries here match those in
public/r/registry.jsonexactly. All six new icon registrations are consistent and properly structured.Also applies to: 942-958, 1996-2012, 2047-2063, 2761-2777, 3118-3134
icons/index.ts (2)
44-44: LGTM! Imports follow the established pattern.All six new icon imports use the correct relative path format and consistent naming convention.
Also applies to: 54-54, 110-110, 114-114, 151-151, 190-190
447-451: LGTM! Icon registry entries are well-structured.All six new icon entries in the
ICON_LISTarray are correctly structured:
- Each has a descriptive
namefield matching the icon component- Each references the imported icon component
- Each includes relevant, searchable
keywordsThe array is sorted alphabetically at line 1391, so the insertion positions don't affect the final registry order.
Also applies to: 504-508, 826-830, 846-850, 1307-1311, 1368-1372
4c70076 to
ed31057
Compare
|
Please attach videos |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @public/r/calendar-icon.json:
- Line 10: The start function currently triggers the shake animation and then
calls animate for the blinking dots without awaiting the shake, causing them to
run in parallel; update the start function in CalendarIcon to await the first
animate call (the one targeting ".calendar-body") before calling await animate
for ".calendar-dot" so the shake completes before the sequential dot blinking
begins, keeping the existing animate options and stagger for the dots and
leaving stop, useImperativeHandle, and motion SVG props unchanged.
🧹 Nitpick comments (1)
public/r/calendar-icon.json (1)
10-10: Removeinline-flexfrom SVG element.The
inline-flexclass is applied to an SVG element, but SVGs don't follow flexbox layout rules. The class has no effect and adds confusion.🔎 Proposed fix
In the embedded
calendar-icon.tsxcontent at line 10, update the className:- className={`inline-flex cursor-pointer items-center justify-center ${className}`} + className={`cursor-pointer ${className}`}Note:
items-centerandjustify-centerare also flexbox utilities that have no effect on SVG elements.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
public/r/calendar-icon.jsonpublic/r/cloud-icon.jsonpublic/r/map-pin-icon.json
🚧 Files skipped from review as they are similar to previous changes (2)
- public/r/cloud-icon.json
- public/r/map-pin-icon.json
🔇 Additional comments (1)
public/r/calendar-icon.json (1)
14-16: LGTM!The type definitions are clear, well-documented, and correctly match the component implementation.
| "files": [ | ||
| { | ||
| "path": "icons/calendar-icon.tsx", | ||
| "content": "import { forwardRef, useImperativeHandle } from \"react\";\nimport { AnimatedIconHandle, AnimatedIconProps } from \"./types\";\nimport { motion, useAnimate, stagger } from \"motion/react\";\n\nconst CalendarIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(\n (\n { size = 24, color = \"currentColor\", strokeWidth = 2, className = \"\" },\n ref,\n ) => {\n const [scope, animate] = useAnimate();\n\n const start = async () => {\n // Shake animation\n animate(\n \".calendar-body\",\n { rotate: [0, -5, 5, -3, 3, 0] },\n { duration: 0.4, ease: \"easeInOut\" },\n );\n\n // Dots blinking animation\n await animate(\n \".calendar-dot\",\n { opacity: [1, 0, 1], scale: [1, 0.5, 1] },\n { duration: 0.3, delay: stagger(0.1) },\n );\n };\n\n const stop = () => {\n animate(\".calendar-body\", { rotate: 0 }, { duration: 0.2 });\n animate(\".calendar-dot\", { opacity: 1, scale: 1 }, { duration: 0.2 });\n };\n\n useImperativeHandle(ref, () => ({\n startAnimation: start,\n stopAnimation: stop,\n }));\n\n return (\n <motion.svg\n ref={scope}\n onHoverStart={start}\n onHoverEnd={stop}\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={`inline-flex cursor-pointer items-center justify-center ${className}`}\n style={{ overflow: \"visible\" }}\n >\n <motion.g className=\"calendar-body\" style={{ transformOrigin: \"top\" }}>\n <rect x=\"4\" y=\"5\" width=\"16\" height=\"16\" rx=\"2\" />\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\" />\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\" />\n <line x1=\"4\" y1=\"10\" x2=\"20\" y2=\"10\" />\n\n {/* Dots */}\n <motion.circle\n className=\"calendar-dot\"\n cx=\"8\"\n cy=\"14\"\n r=\"1\"\n fill=\"currentColor\"\n stroke=\"none\"\n />\n <motion.circle\n className=\"calendar-dot\"\n cx=\"12\"\n cy=\"14\"\n r=\"1\"\n fill=\"currentColor\"\n stroke=\"none\"\n />\n <motion.circle\n className=\"calendar-dot\"\n cx=\"16\"\n cy=\"14\"\n r=\"1\"\n fill=\"currentColor\"\n stroke=\"none\"\n />\n <motion.circle\n className=\"calendar-dot\"\n cx=\"8\"\n cy=\"18\"\n r=\"1\"\n fill=\"currentColor\"\n stroke=\"none\"\n />\n <motion.circle\n className=\"calendar-dot\"\n cx=\"12\"\n cy=\"18\"\n r=\"1\"\n fill=\"currentColor\"\n stroke=\"none\"\n />\n <motion.circle\n className=\"calendar-dot\"\n cx=\"16\"\n cy=\"18\"\n r=\"1\"\n fill=\"currentColor\"\n stroke=\"none\"\n />\n </motion.g>\n </motion.svg>\n );\n },\n);\n\nCalendarIcon.displayName = \"CalendarIcon\";\nexport default CalendarIcon;\n", |
There was a problem hiding this comment.
Fix animation sequencing to match PR description.
The PR description states "sequential blinking dots," but the first animate call in the start function is not awaited. This causes the shake and dots animations to run in parallel rather than sequentially.
🔎 Proposed fix
In the embedded calendar-icon.tsx content at line 10, update the start function to await the shake animation:
const start = async () => {
// Shake animation
- animate(
+ await animate(
".calendar-body",
{ rotate: [0, -5, 5, -3, 3, 0] },
{ duration: 0.4, ease: "easeInOut" },
);
// Dots blinking animation
await animate(🤖 Prompt for AI Agents
In @public/r/calendar-icon.json at line 10, The start function currently
triggers the shake animation and then calls animate for the blinking dots
without awaiting the shake, causing them to run in parallel; update the start
function in CalendarIcon to await the first animate call (the one targeting
".calendar-body") before calling await animate for ".calendar-dot" so the shake
completes before the sequential dot blinking begins, keeping the existing
animate options and stagger for the dots and leaving stop, useImperativeHandle,
and motion SVG props unchanged.
calendar.mp4cloud.mp4map.mp4sun.mp4wallet.mp4microphone.mp4 |
calendar.mp4cloud.mp4map.mp4sun.mp4wallet.mp4microphone.mp4 |
|
The sun icon already exists. |
|
cloud icon is also good |
|
wallet and microphone icons ? yes i can improve those. You can suggest some other animations for these icons if you have any in mind. |
|
We can use the sun icon as brightness-up-icon i thought. |
|
Use your creativity, and ensure the intent is clearly reflected. |
Description
Added 6 new essential animated icons.
New Icons & Animations:
Type of Change
Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.