Skip to content

added bag.fm icon#83

Merged
Abhijit-Jha merged 1 commit intomasterfrom
icon/bags.fm
Jan 14, 2026
Merged

added bag.fm icon#83
Abhijit-Jha merged 1 commit intomasterfrom
icon/bags.fm

Conversation

@Abhijit-Jha
Copy link
Copy Markdown
Member

@Abhijit-Jha Abhijit-Jha commented Jan 14, 2026

Summary by CodeRabbit

  • New Features
    • Introduced an animated brand bags icon component with interactive hover animation and programmable controls for dynamic effects
    • Icon component supports extensive customization options for size, color, and stroke width to fit various design needs
    • Component registered and indexed in the system with relevant keywords to enable easy discovery and seamless integration

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Jan 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
itshover-icons Ready Ready Preview, Comment Jan 14, 2026 4:29pm

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Jan 14, 2026

📝 Walkthrough

Walkthrough

Introduces a new animated icon component BrandBagsFmIcon that renders a bag SVG with motion library-based hover animations. The component exposes imperative controls via ref (startAnimation/stopAnimation) and is registered in the icons registry with corresponding type definitions.

Changes

Cohort / File(s) Summary
New Animated Icon Component
icons/brand-bags-fm-icon.tsx
New forwardRef React component (63 lines) with hover-triggered animation sequencing bag rotation and vertical offset via useAnimate; exposes startAnimation/stopAnimation imperative API
Icon Registry Updates
icons/index.ts
Imports BrandBagsFmIcon and registers in ICON_LIST with keywords ["bags", "fm", "brand", "logo", "shopping", "ecommerce"]
Type Definitions
icons/types.ts
Exports AnimatedIconProps and AnimatedIconHandle interfaces for standardizing animated icon component contracts
Registry Entries
public/r/brand-bags-fm-icon.json, public/r/registry.json, registry.json
Adds UI registry entries for brand-bags-fm-icon with motion dependency and component file references

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Poem

🐰 A shopping bag takes flight with grace,
Animation hops across the space,
With refs and hooks, a motion dance,
Our FM brand gets its fancy prance!
✨🛍️

🚥 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 'added bag.fm icon' clearly describes the main change: introducing a new BrandBagsFmIcon component for a bag.fm branded icon with animation capabilities.
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 docstrings

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

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Jan 14, 2026

Greptile Summary

This PR adds a new animated brand icon for bag.fm to the icon library. The implementation follows the standard icon pattern with React forwardRef, motion animations, and proper TypeScript typing. All necessary registry files have been updated correctly.

Key changes:

  • New BrandBagsFmIcon component with wiggle/swing animation on hover
  • Icon registered in icons/index.ts with appropriate keywords (bags, fm, brand, logo, shopping, ecommerce)
  • Registry metadata added to both registry.json and public/r/brand-bags-fm-icon.json
  • Animation uses rotation and vertical translation for a playful bag-swinging effect

Minor style inconsistencies noted:

  • Uses non-standard viewBox="0 0 1024 1024" instead of the typical 24 24 used by other icons
  • SVG attributes have conflicting fill/stroke declarations
  • Missing select-none class that other brand icons include

Confidence Score: 4/5

  • This PR is safe to merge with minor style improvements recommended
  • The implementation is functionally correct and follows the established icon pattern. All registry files are properly updated. The minor style inconsistencies (non-standard viewBox, conflicting SVG attributes, missing select-none class) don't affect functionality but should be addressed for consistency with other icons in the codebase.
  • Review icons/brand-bags-fm-icon.tsx for style consistency improvements

Important Files Changed

Filename Overview
icons/brand-bags-fm-icon.tsx Added new animated bag.fm brand icon with wiggle animation on hover
icons/index.ts Registered new brand-bags-fm icon with appropriate keywords
public/r/brand-bags-fm-icon.json Added registry metadata for the new icon
public/r/registry.json Updated registry with brand-bags-fm-icon entry
registry.json Updated registry with brand-bags-fm-icon entry

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant Icon as BrandBagsFmIcon
    participant Registry as Icon Registry
    participant User as User Browser
    
    Dev->>Icon: Create brand-bags-fm-icon.tsx
    Note over Icon: Defines animated icon component<br/>with hover animations
    
    Dev->>Registry: Add to icons/index.ts
    Note over Registry: Import and register with keywords
    
    Dev->>Registry: Update registry.json files
    Note over Registry: Add metadata for<br/>component registry
    
    User->>Icon: Hover on icon
    Icon->>Icon: onHoverStart triggers
    Icon->>Icon: animate .bag element
    Note over Icon: Rotate & translate animation<br/>[0,-8,8,-6,6,-3,3,0]<br/>y: [0,-5,0,-3,0,-2,0]
    
    User->>Icon: Mouse leaves
    Icon->>Icon: onHoverEnd triggers
    Icon->>Icon: Reset to default position
    Note over Icon: rotate: 0, y: 0
Loading

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.

5 files reviewed, 2 comments

Edit Code Review Agent Settings | Greptile

Comment on lines +42 to +44
viewBox="0 0 1024 1024"
fill="none"
stroke={color}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

style: SVG has conflicting fill/stroke attributes. The root SVG specifies fill="none" and stroke={color}, but the path on line 53 uses fill={color}. This mismatch could cause rendering issues. Should either remove stroke={color} from the SVG or use stroke instead of fill on the path.

Suggested change
viewBox="0 0 1024 1024"
fill="none"
stroke={color}
viewBox="0 0 1024 1024"
fill={color}
strokeWidth={strokeWidth}
Prompt To Fix With AI
This is a comment left during a code review.
Path: icons/brand-bags-fm-icon.tsx
Line: 42:44

Comment:
**style:** SVG has conflicting fill/stroke attributes. The root SVG specifies `fill="none"` and `stroke={color}`, but the path on line 53 uses `fill={color}`. This mismatch could cause rendering issues. Should either remove `stroke={color}` from the SVG or use `stroke` instead of `fill` on the path.

```suggestion
        viewBox="0 0 1024 1024"
        fill={color}
        strokeWidth={strokeWidth}
```

How can I resolve this? If you propose a fix, please make it concise.

strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
className={`cursor-pointer ${className}`}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

style: Missing select-none class. Other brand icons like brand-aws-icon.tsx:60 use cursor-pointer select-none to prevent text selection during interaction.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI
This is a comment left during a code review.
Path: icons/brand-bags-fm-icon.tsx
Line: 48:48

Comment:
**style:** Missing `select-none` class. Other brand icons like `brand-aws-icon.tsx:60` use `cursor-pointer select-none` to prevent text selection during interaction.

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

@Abhijit-Jha Abhijit-Jha merged commit fe0766e into master Jan 14, 2026
4 of 5 checks passed
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.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@icons/brand-bags-fm-icon.tsx`:
- Around line 50-55: The motion.g element with className "bag" uses string
percentages for originX/originY which is invalid for Framer Motion; update the
originX and originY props on the motion.g (and any similar icon components) to
numeric values between 0 and 1 (e.g., 50% -> 0.5, 100% -> 1) so transforms use
the documented transform-origin API.
📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 214520b and 12c9d91.

📒 Files selected for processing (5)
  • icons/brand-bags-fm-icon.tsx
  • icons/index.ts
  • public/r/brand-bags-fm-icon.json
  • public/r/registry.json
  • registry.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Greptile Review
🔇 Additional comments (6)
registry.json (1)

704-720: LGTM!

The new registry entry follows the established pattern for other icons in this auto-generated file. The structure correctly declares motion as a dependency and includes both the icon component and types files.

public/r/registry.json (1)

704-720: LGTM!

Entry correctly added to the public registry following the established pattern.

icons/brand-bags-fm-icon.tsx (1)

1-32: LGTM - Component structure and animation logic.

The component correctly implements the AnimatedIconHandle interface via useImperativeHandle, properly uses useAnimate for scoped animations, and follows the established pattern for animated icons in this project.

public/r/brand-bags-fm-icon.json (1)

1-20: LGTM!

Registry item JSON is correctly structured with embedded source code for both the icon component and types file. Dependencies are properly declared.

icons/index.ts (2)

47-47: LGTM!

Import follows the established naming convention and placement pattern.


1421-1425: LGTM!

The ICON_LIST entry follows the established pattern with appropriate keywords for discoverability.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Comment on lines +50 to +55
<motion.g className="bag" style={{ originX: "50%", originY: "100%" }}>
<motion.path
d="M 561.64 1018.00 C541.03,1019.15 482.25,1019.09 461.00,1017.88 C428.17,1016.02 384.57,1010.43 359.50,1004.88 C276.24,986.43 221.60,959.81 176.15,915.53 C130.14,870.72 104.87,814.62 98.92,744.08 C97.58,728.12 98.21,685.69 99.98,673.00 C100.56,668.88 101.74,660.33 102.61,654.00 C112.42,582.33 148.13,492.03 190.38,432.09 C218.55,392.11 255.44,354.21 296.61,322.93 C307.25,314.85 311.79,313.00 321.00,313.00 C329.04,313.00 333.32,314.38 342.31,319.88 C359.36,330.32 385.72,341.87 407.76,348.57 C432.77,356.17 453.66,360.10 482.00,362.55 C553.43,368.72 624.89,353.61 682.14,320.22 C693.80,313.42 696.44,312.53 705.00,312.57 C714.85,312.61 718.38,314.30 734.00,326.45 C797.73,376.03 845.64,435.94 877.67,506.14 C903.33,562.37 919.23,617.23 925.67,671.74 C928.13,692.55 928.10,740.24 925.61,758.50 C921.88,785.96 914.99,811.78 905.35,834.43 C891.92,866.01 874.02,892.03 848.86,916.54 C835.25,929.80 824.91,938.14 809.00,948.70 C748.01,989.18 666.12,1012.12 561.64,1018.00 ZM 536.19 826.97 C540.81,825.68 545.00,820.86 545.00,816.82 C545.00,812.50 547.56,807.69 550.92,805.71 C553.43,804.22 557.01,804.00 578.26,804.00 C615.47,804.00 633.30,802.14 651.41,796.38 C673.82,789.25 686.65,776.74 691.55,757.22 C692.87,752.00 693.07,745.89 692.76,721.22 C692.35,689.59 691.82,685.50 686.70,675.01 C681.23,663.80 665.70,653.24 646.15,647.43 C641.39,646.02 631.88,643.14 625.00,641.03 C606.42,635.34 582.75,628.19 572.00,625.02 C547.05,617.65 508.45,605.77 504.70,604.29 C498.82,601.98 493.27,598.38 492.04,596.08 C491.47,595.01 491.00,592.36 491.00,590.20 C491.00,582.30 497.66,577.84 509.50,577.82 C522.74,577.81 528.73,582.58 530.47,594.50 C530.87,597.25 531.71,599.83 532.35,600.23 C532.98,600.64 563.97,600.98 601.21,600.98 C666.27,601.00 669.13,600.92 674.21,599.02 C681.74,596.20 686.42,591.92 690.06,584.53 C693.16,578.23 693.20,577.94 692.85,565.76 C692.51,553.79 692.38,553.15 688.72,545.75 C683.93,536.06 676.81,529.50 664.50,523.44 C645.31,513.99 626.50,511.02 585.20,510.94 C565.67,510.91 555.41,510.51 553.09,509.69 C548.74,508.17 546.24,504.73 545.14,498.78 C544.01,492.65 541.66,489.17 537.45,487.42 C532.52,485.36 487.43,485.38 482.49,487.44 C478.47,489.12 475.01,494.22 475.00,498.50 C474.99,502.15 471.94,507.40 468.80,509.17 C467.11,510.13 457.40,510.64 432.00,511.12 C406.48,511.60 395.22,512.20 388.74,513.42 C358.34,519.14 340.06,529.78 331.91,546.50 L 328.50 553.50 L 328.19 578.78 C327.93,599.97 328.14,604.97 329.53,609.74 C335.16,629.13 346.66,638.38 379.50,649.96 C384.45,651.71 390.75,653.74 393.50,654.47 C396.25,655.20 408.85,658.81 421.50,662.49 C449.39,670.59 469.49,676.41 494.00,683.46 C524.12,692.13 528.85,695.08 531.01,706.53 C531.93,711.45 531.93,714.46 531.00,719.97 C529.70,727.74 527.09,731.84 521.63,734.73 C517.07,737.14 505.64,737.00 500.56,734.46 C494.61,731.49 493.04,728.63 492.03,718.81 C490.65,705.44 486.14,698.82 476.50,696.04 C473.62,695.21 455.29,694.97 411.00,695.19 L 349.50 695.50 L 344.64 697.89 C338.22,701.06 333.29,706.13 330.30,712.66 C327.92,717.87 327.87,718.49 328.18,739.30 L 328.50 760.61 L 332.27 768.24 C342.28,788.48 366.04,799.76 405.50,802.99 C412.10,803.53 428.38,803.98 441.68,803.98 C454.99,803.99 467.02,804.44 468.43,804.98 C471.68,806.21 474.99,811.57 475.00,815.60 C475.00,819.92 478.87,825.26 483.03,826.69 C487.42,828.20 530.93,828.43 536.19,826.97 ZM 538.50 289.97 C496.13,293.54 448.71,287.35 418.42,274.29 C400.92,266.74 395.55,263.15 374.23,244.71 C335.15,210.90 308.78,179.14 298.10,153.00 C294.86,145.06 294.63,143.75 294.57,133.00 C294.51,122.90 294.78,120.98 296.76,117.28 C300.36,110.53 304.53,106.44 318.44,96.01 C343.30,77.37 350.32,70.84 389.50,29.94 C408.14,10.48 415.56,6.96 439.53,6.23 C452.01,5.85 456.43,6.13 465.56,7.87 C476.52,9.97 479.33,10.84 509.50,21.49 C533.06,29.80 540.92,31.28 562.00,31.37 C573.44,31.41 582.10,30.94 587.00,29.99 C597.54,27.96 620.67,28.11 628.72,30.27 C635.91,32.20 646.41,37.33 653.28,42.26 C655.91,44.15 665.14,52.63 673.79,61.10 C693.45,80.36 701.04,86.89 714.89,96.47 C726.70,104.63 730.32,108.22 733.07,114.50 C744.54,140.60 718.47,183.79 657.88,239.05 C629.95,264.53 617.87,271.89 589.75,280.53 C576.65,284.56 554.66,288.61 538.50,289.97 Z"
fill={color}
/>
</motion.g>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check how other icons in the project set transform origins
rg -n "originX|originY" --type=tsx -C2

Repository: itshover/itshover

Length of output: 88


🏁 Script executed:

#!/bin/bash
# Search for originX/originY usage in all files
rg -n "originX|originY" -C2

Repository: itshover/itshover

Length of output: 26659


🌐 Web query:

Framer Motion originX originY API documentation string percentage

💡 Result:

Short answer: originX/originY expect numbers (interpreted as a progress value 0 → 1) or MotionValues; they are not documented as taking percentage strings like "50%". If you need percentage CSS form, set transformOrigin in style (e.g. style={{ transformOrigin: "50% 50%" }}). [1][2]

Sources:

  • Framer/Motion docs: transform-origin — numbers are treated as progress between 0 and 1. [1]
  • stylefire / Popmotion note: originX/originY set as numbers become progress (originZ uses px). [2]

🏁 Script executed:

#!/bin/bash
# Count how many files have the same pattern
rg -c "originX.*%|originY.*%" --type-list | head -5
# Show all files with this pattern
rg -l "originX.*%"

Repository: itshover/itshover

Length of output: 737


Use numeric values for originX/originY instead of string percentages.

Framer Motion's originX and originY properties expect numeric values between 0 and 1 (where 0.5 = 50%, 1 = 100%), not string percentages. The current format originX: "50%" and originY: "100%" diverges from the documented API and may cause unexpected behavior. Use numeric values to ensure correct transform-origin behavior.

♻️ Suggested fix
-        <motion.g className="bag" style={{ originX: "50%", originY: "100%" }}>
+        <motion.g className="bag" style={{ originX: 0.5, originY: 1 }}>

Note: This pattern appears in multiple icon files across the codebase and should be addressed consistently.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<motion.g className="bag" style={{ originX: "50%", originY: "100%" }}>
<motion.path
d="M 561.64 1018.00 C541.03,1019.15 482.25,1019.09 461.00,1017.88 C428.17,1016.02 384.57,1010.43 359.50,1004.88 C276.24,986.43 221.60,959.81 176.15,915.53 C130.14,870.72 104.87,814.62 98.92,744.08 C97.58,728.12 98.21,685.69 99.98,673.00 C100.56,668.88 101.74,660.33 102.61,654.00 C112.42,582.33 148.13,492.03 190.38,432.09 C218.55,392.11 255.44,354.21 296.61,322.93 C307.25,314.85 311.79,313.00 321.00,313.00 C329.04,313.00 333.32,314.38 342.31,319.88 C359.36,330.32 385.72,341.87 407.76,348.57 C432.77,356.17 453.66,360.10 482.00,362.55 C553.43,368.72 624.89,353.61 682.14,320.22 C693.80,313.42 696.44,312.53 705.00,312.57 C714.85,312.61 718.38,314.30 734.00,326.45 C797.73,376.03 845.64,435.94 877.67,506.14 C903.33,562.37 919.23,617.23 925.67,671.74 C928.13,692.55 928.10,740.24 925.61,758.50 C921.88,785.96 914.99,811.78 905.35,834.43 C891.92,866.01 874.02,892.03 848.86,916.54 C835.25,929.80 824.91,938.14 809.00,948.70 C748.01,989.18 666.12,1012.12 561.64,1018.00 ZM 536.19 826.97 C540.81,825.68 545.00,820.86 545.00,816.82 C545.00,812.50 547.56,807.69 550.92,805.71 C553.43,804.22 557.01,804.00 578.26,804.00 C615.47,804.00 633.30,802.14 651.41,796.38 C673.82,789.25 686.65,776.74 691.55,757.22 C692.87,752.00 693.07,745.89 692.76,721.22 C692.35,689.59 691.82,685.50 686.70,675.01 C681.23,663.80 665.70,653.24 646.15,647.43 C641.39,646.02 631.88,643.14 625.00,641.03 C606.42,635.34 582.75,628.19 572.00,625.02 C547.05,617.65 508.45,605.77 504.70,604.29 C498.82,601.98 493.27,598.38 492.04,596.08 C491.47,595.01 491.00,592.36 491.00,590.20 C491.00,582.30 497.66,577.84 509.50,577.82 C522.74,577.81 528.73,582.58 530.47,594.50 C530.87,597.25 531.71,599.83 532.35,600.23 C532.98,600.64 563.97,600.98 601.21,600.98 C666.27,601.00 669.13,600.92 674.21,599.02 C681.74,596.20 686.42,591.92 690.06,584.53 C693.16,578.23 693.20,577.94 692.85,565.76 C692.51,553.79 692.38,553.15 688.72,545.75 C683.93,536.06 676.81,529.50 664.50,523.44 C645.31,513.99 626.50,511.02 585.20,510.94 C565.67,510.91 555.41,510.51 553.09,509.69 C548.74,508.17 546.24,504.73 545.14,498.78 C544.01,492.65 541.66,489.17 537.45,487.42 C532.52,485.36 487.43,485.38 482.49,487.44 C478.47,489.12 475.01,494.22 475.00,498.50 C474.99,502.15 471.94,507.40 468.80,509.17 C467.11,510.13 457.40,510.64 432.00,511.12 C406.48,511.60 395.22,512.20 388.74,513.42 C358.34,519.14 340.06,529.78 331.91,546.50 L 328.50 553.50 L 328.19 578.78 C327.93,599.97 328.14,604.97 329.53,609.74 C335.16,629.13 346.66,638.38 379.50,649.96 C384.45,651.71 390.75,653.74 393.50,654.47 C396.25,655.20 408.85,658.81 421.50,662.49 C449.39,670.59 469.49,676.41 494.00,683.46 C524.12,692.13 528.85,695.08 531.01,706.53 C531.93,711.45 531.93,714.46 531.00,719.97 C529.70,727.74 527.09,731.84 521.63,734.73 C517.07,737.14 505.64,737.00 500.56,734.46 C494.61,731.49 493.04,728.63 492.03,718.81 C490.65,705.44 486.14,698.82 476.50,696.04 C473.62,695.21 455.29,694.97 411.00,695.19 L 349.50 695.50 L 344.64 697.89 C338.22,701.06 333.29,706.13 330.30,712.66 C327.92,717.87 327.87,718.49 328.18,739.30 L 328.50 760.61 L 332.27 768.24 C342.28,788.48 366.04,799.76 405.50,802.99 C412.10,803.53 428.38,803.98 441.68,803.98 C454.99,803.99 467.02,804.44 468.43,804.98 C471.68,806.21 474.99,811.57 475.00,815.60 C475.00,819.92 478.87,825.26 483.03,826.69 C487.42,828.20 530.93,828.43 536.19,826.97 ZM 538.50 289.97 C496.13,293.54 448.71,287.35 418.42,274.29 C400.92,266.74 395.55,263.15 374.23,244.71 C335.15,210.90 308.78,179.14 298.10,153.00 C294.86,145.06 294.63,143.75 294.57,133.00 C294.51,122.90 294.78,120.98 296.76,117.28 C300.36,110.53 304.53,106.44 318.44,96.01 C343.30,77.37 350.32,70.84 389.50,29.94 C408.14,10.48 415.56,6.96 439.53,6.23 C452.01,5.85 456.43,6.13 465.56,7.87 C476.52,9.97 479.33,10.84 509.50,21.49 C533.06,29.80 540.92,31.28 562.00,31.37 C573.44,31.41 582.10,30.94 587.00,29.99 C597.54,27.96 620.67,28.11 628.72,30.27 C635.91,32.20 646.41,37.33 653.28,42.26 C655.91,44.15 665.14,52.63 673.79,61.10 C693.45,80.36 701.04,86.89 714.89,96.47 C726.70,104.63 730.32,108.22 733.07,114.50 C744.54,140.60 718.47,183.79 657.88,239.05 C629.95,264.53 617.87,271.89 589.75,280.53 C576.65,284.56 554.66,288.61 538.50,289.97 Z"
fill={color}
/>
</motion.g>
<motion.g className="bag" style={{ originX: 0.5, originY: 1 }}>
<motion.path
d="M 561.64 1018.00 C541.03,1019.15 482.25,1019.09 461.00,1017.88 C428.17,1016.02 384.57,1010.43 359.50,1004.88 C276.24,986.43 221.60,959.81 176.15,915.53 C130.14,870.72 104.87,814.62 98.92,744.08 C97.58,728.12 98.21,685.69 99.98,673.00 C100.56,668.88 101.74,660.33 102.61,654.00 C112.42,582.33 148.13,492.03 190.38,432.09 C218.55,392.11 255.44,354.21 296.61,322.93 C307.25,314.85 311.79,313.00 321.00,313.00 C329.04,313.00 333.32,314.38 342.31,319.88 C359.36,330.32 385.72,341.87 407.76,348.57 C432.77,356.17 453.66,360.10 482.00,362.55 C553.43,368.72 624.89,353.61 682.14,320.22 C693.80,313.42 696.44,312.53 705.00,312.57 C714.85,312.61 718.38,314.30 734.00,326.45 C797.73,376.03 845.64,435.94 877.67,506.14 C903.33,562.37 919.23,617.23 925.67,671.74 C928.13,692.55 928.10,740.24 925.61,758.50 C921.88,785.96 914.99,811.78 905.35,834.43 C891.92,866.01 874.02,892.03 848.86,916.54 C835.25,929.80 824.91,938.14 809.00,948.70 C748.01,989.18 666.12,1012.12 561.64,1018.00 ZM 536.19 826.97 C540.81,825.68 545.00,820.86 545.00,816.82 C545.00,812.50 547.56,807.69 550.92,805.71 C553.43,804.22 557.01,804.00 578.26,804.00 C615.47,804.00 633.30,802.14 651.41,796.38 C673.82,789.25 686.65,776.74 691.55,757.22 C692.87,752.00 693.07,745.89 692.76,721.22 C692.35,689.59 691.82,685.50 686.70,675.01 C681.23,663.80 665.70,653.24 646.15,647.43 C641.39,646.02 631.88,643.14 625.00,641.03 C606.42,635.34 582.75,628.19 572.00,625.02 C547.05,617.65 508.45,605.77 504.70,604.29 C498.82,601.98 493.27,598.38 492.04,596.08 C491.47,595.01 491.00,592.36 491.00,590.20 C491.00,582.30 497.66,577.84 509.50,577.82 C522.74,577.81 528.73,582.58 530.47,594.50 C530.87,597.25 531.71,599.83 532.35,600.23 C532.98,600.64 563.97,600.98 601.21,600.98 C666.27,601.00 669.13,600.92 674.21,599.02 C681.74,596.20 686.42,591.92 690.06,584.53 C693.16,578.23 693.20,577.94 692.85,565.76 C692.51,553.79 692.38,553.15 688.72,545.75 C683.93,536.06 676.81,529.50 664.50,523.44 C645.31,513.99 626.50,511.02 585.20,510.94 C565.67,510.91 555.41,510.51 553.09,509.69 C548.74,508.17 546.24,504.73 545.14,498.78 C544.01,492.65 541.66,489.17 537.45,487.42 C532.52,485.36 487.43,485.38 482.49,487.44 C478.47,489.12 475.01,494.22 475.00,498.50 C474.99,502.15 471.94,507.40 468.80,509.17 C467.11,510.13 457.40,510.64 432.00,511.12 C406.48,511.60 395.22,512.20 388.74,513.42 C358.34,519.14 340.06,529.78 331.91,546.50 L 328.50 553.50 L 328.19 578.78 C327.93,599.97 328.14,604.97 329.53,609.74 C335.16,629.13 346.66,638.38 379.50,649.96 C384.45,651.71 390.75,653.74 393.50,654.47 C396.25,655.20 408.85,658.81 421.50,662.49 C449.39,670.59 469.49,676.41 494.00,683.46 C524.12,692.13 528.85,695.08 531.01,706.53 C531.93,711.45 531.93,714.46 531.00,719.97 C529.70,727.74 527.09,731.84 521.63,734.73 C517.07,737.14 505.64,737.00 500.56,734.46 C494.61,731.49 493.04,728.63 492.03,718.81 C490.65,705.44 486.14,698.82 476.50,696.04 C473.62,695.21 455.29,694.97 411.00,695.19 L 349.50 695.50 L 344.64 697.89 C338.22,701.06 333.29,706.13 330.30,712.66 C327.92,717.87 327.87,718.49 328.18,739.30 L 328.50 760.61 L 332.27 768.24 C342.28,788.48 366.04,799.76 405.50,802.99 C412.10,803.53 428.38,803.98 441.68,803.98 C454.99,803.99 467.02,804.44 468.43,804.98 C471.68,806.21 474.99,811.57 475.00,815.60 C475.00,819.92 478.87,825.26 483.03,826.69 C487.42,828.20 530.93,828.43 536.19,826.97 ZM 538.50 289.97 C496.13,293.54 448.71,287.35 418.42,274.29 C400.92,266.74 395.55,263.15 374.23,244.71 C335.15,210.90 308.78,179.14 298.10,153.00 C294.86,145.06 294.63,143.75 294.57,133.00 C294.51,122.90 294.78,120.98 296.76,117.28 C300.36,110.53 304.53,106.44 318.44,96.01 C343.30,77.37 350.32,70.84 389.50,29.94 C408.14,10.48 415.56,6.96 439.53,6.23 C452.01,5.85 456.43,6.13 465.56,7.87 C476.52,9.97 479.33,10.84 509.50,21.49 C533.06,29.80 540.92,31.28 562.00,31.37 C573.44,31.41 582.10,30.94 587.00,29.99 C597.54,27.96 620.67,28.11 628.72,30.27 C635.91,32.20 646.41,37.33 653.28,42.26 C655.91,44.15 665.14,52.63 673.79,61.10 C693.45,80.36 701.04,86.89 714.89,96.47 C726.70,104.63 730.32,108.22 733.07,114.50 C744.54,140.60 718.47,183.79 657.88,239.05 C629.95,264.53 617.87,271.89 589.75,280.53 C576.65,284.56 554.66,288.61 538.50,289.97 Z"
fill={color}
/>
</motion.g>
🤖 Prompt for AI Agents
In `@icons/brand-bags-fm-icon.tsx` around lines 50 - 55, The motion.g element with
className "bag" uses string percentages for originX/originY which is invalid for
Framer Motion; update the originX and originY props on the motion.g (and any
similar icon components) to numeric values between 0 and 1 (e.g., 50% -> 0.5,
100% -> 1) so transforms use the documented transform-origin API.

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.

1 participant