feat(icons): add Basket, BookmarkFilled, UserProtected and update Bookmark, Watch#3802
Open
feat(icons): add Basket, BookmarkFilled, UserProtected and update Bookmark, Watch#3802
Conversation
…te Bookmark, Watch
Contributor
✅ No New Circular DependenciesNo new circular dependencies detected. Current count: 0 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| export { default as ArrowRight } from "./ArrowRight" | ||
| export { default as ArrowUp } from "./ArrowUp" | ||
| export { default as Bank } from "./Bank" | ||
| export { default as Basket } from "./Basket" |
There was a problem hiding this comment.
New exports break alphabetical ordering in index
Low Severity
The new Basket export is placed before BarGraph, but alphabetically "BarGraph" < "Basket". Similarly, UserProtected is placed before Upsell, but "Upsell" < "UserProtected". Both insertions break the alphabetical ordering convention of the exports list, making icons harder to locate and maintain.
Additional Locations (1)
Contributor
There was a problem hiding this comment.
Pull request overview
Adds three new app icons and refreshes two existing ones to match the updated filled-style icon set.
Changes:
- Added new icons:
Basket,BookmarkFilled,UserProtected. - Updated existing icons:
BookmarkandWatchto new filled-style designs (and ensured they usecurrentColor).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/icons/app/Watch.tsx | Replaces the previous stroke-based watch with a filled body + stroked hands. |
| packages/react/src/icons/app/UserProtected.tsx | Adds the new UserProtected icon component. |
| packages/react/src/icons/app/index.ts | Exports the new icons from the app icons barrel. |
| packages/react/src/icons/app/BookmarkFilled.tsx | Adds the filled bookmark variant icon component. |
| packages/react/src/icons/app/Bookmark.tsx | Updates Bookmark to the new filled-outline design. |
| packages/react/src/icons/app/Basket.tsx | Adds the new Basket icon component. |
Contributor
📦 Alpha Package Version PublishedUse Use |
Contributor
🔍 Visual review for your branch is published 🔍Here are the links to: |
Contributor
Coverage Report for packages/react
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Comment on lines
11
to
14
| <path | ||
| d="m16.13 7.66-.81-4.05a2 2 0 0 0-2-1.61h-2.68a2 2 0 0 0-2 1.61l-.78 4.05" | ||
| vectorEffect="non-scaling-stroke" | ||
| d="M12 2.34961C12.5182 2.34962 12.9694 2.37913 13.3516 2.42188C13.8208 2.47432 14.3633 2.50573 14.7822 2.93555C15.0225 3.18222 15.1214 3.48455 15.1768 3.76367C15.2306 4.03551 15.2589 4.37743 15.292 4.76172C15.3591 5.53967 15.5776 6.26032 15.7842 6.79297C15.8866 7.05713 15.9845 7.27054 16.0557 7.41602C16.0911 7.4885 16.1205 7.5441 16.1396 7.58008C16.1433 7.58694 16.1466 7.59314 16.1494 7.59863C17.3191 8.70192 18.0497 10.2654 18.0498 12C18.0497 13.7349 17.3184 15.2982 16.1484 16.4014C16.1457 16.4066 16.143 16.4126 16.1396 16.4189C16.1205 16.4548 16.0911 16.5106 16.0557 16.583C15.9845 16.7285 15.8867 16.9427 15.7842 17.207C15.5776 17.7396 15.3591 18.4605 15.292 19.2383C15.2589 19.6224 15.2306 19.9646 15.1768 20.2363C15.1214 20.5154 15.0224 20.8178 14.7822 21.0645C14.3633 21.4943 13.8207 21.5256 13.3516 21.5781C12.9695 21.6208 12.5182 21.6494 12 21.6494C11.6117 21.6494 11.2611 21.6336 10.9492 21.6074L10.6494 21.5781C10.1802 21.5256 9.63791 21.4943 9.21875 21.0645C8.97826 20.8178 8.87959 20.5155 8.82422 20.2363C8.77035 19.9646 8.74212 19.6225 8.70898 19.2383C8.64188 18.4605 8.42333 17.7396 8.2168 17.207C8.11424 16.9426 8.01651 16.7285 7.94531 16.583C7.90981 16.5105 7.88047 16.4549 7.86133 16.4189C7.8581 16.4129 7.85514 16.4073 7.85254 16.4023C6.68185 15.2991 5.94933 13.7353 5.94922 12C5.94933 10.2649 6.68115 8.70099 7.85156 7.59766C7.8543 7.59238 7.85789 7.58654 7.86133 7.58008C7.88049 7.54407 7.90988 7.48842 7.94531 7.41602C8.01649 7.27052 8.11437 7.05707 8.2168 6.79297C8.42335 6.26033 8.64189 5.53959 8.70898 4.76172C8.74213 4.37742 8.77033 4.0355 8.82422 3.76367C8.87958 3.48449 8.97829 3.18225 9.21875 2.93555C9.63788 2.50583 10.18 2.47435 10.6494 2.42188C11.0315 2.37915 11.482 2.34962 12 2.34961ZM14.2822 17.6025C13.5778 17.8898 12.8076 18.0498 12 18.0498C11.192 18.0498 10.4215 17.8901 9.7168 17.6025C9.84577 18.0586 9.95643 18.576 10.0039 19.126C10.0396 19.5404 10.0629 19.7982 10.0996 19.9834C10.1347 20.1606 10.1651 20.1734 10.1494 20.1572C10.165 20.1732 10.1793 20.1873 10.2529 20.207C10.3581 20.2352 10.5049 20.2538 10.7939 20.2861L11.0576 20.3115C11.3337 20.3347 11.648 20.3496 12 20.3496C12.4696 20.3496 12.8725 20.3235 13.207 20.2861C13.4962 20.2538 13.6429 20.2353 13.748 20.207C13.8215 20.1873 13.836 20.1732 13.8516 20.1572C13.8356 20.1736 13.8661 20.161 13.9014 19.9834C13.938 19.7983 13.9614 19.5403 13.9971 19.126C14.0446 18.5761 14.1533 18.0585 14.2822 17.6025ZM12 7.25C9.37696 7.25021 7.25021 9.37696 7.25 12C7.25021 14.623 9.37696 16.7498 12 16.75C14.623 16.7498 16.7498 14.623 16.75 12C16.7498 9.37696 14.623 7.25021 12 7.25ZM12 3.65039C11.5305 3.65041 11.1283 3.67648 10.7939 3.71387C10.5051 3.74616 10.3581 3.76385 10.2529 3.79199C10.1794 3.81174 10.165 3.82676 10.1494 3.84277C10.165 3.82668 10.1347 3.83965 10.0996 4.0166C10.0629 4.20169 10.0396 4.45884 10.0039 4.87305C9.95647 5.42304 9.84577 5.94044 9.7168 6.39648C10.4215 6.10898 11.1921 5.94927 12 5.94922C12.8075 5.94927 13.5779 6.10927 14.2822 6.39648C14.1533 5.94053 14.0445 5.42292 13.9971 4.87305C13.9614 4.45889 13.938 4.20167 13.9014 4.0166C13.8661 3.8389 13.8356 3.82639 13.8516 3.84277C13.836 3.82677 13.8215 3.81177 13.748 3.79199C13.6429 3.76379 13.496 3.74618 13.207 3.71387C12.8726 3.67646 12.4697 3.65041 12 3.65039Z" | ||
| fill="currentColor" | ||
| /> |
There was a problem hiding this comment.
Most app icon paths in this folder include vectorEffect="non-scaling-stroke" even when they’re filled (e.g., ThumbsUpFilled.tsx:15-23, SolidPlay.tsx:15-18). This new filled watch body path omits it, which makes it inconsistent with the rest of the icon set and may lead to unexpected scaling differences if the SVG is transformed. Consider adding vectorEffect="non-scaling-stroke" to this filled path as well for consistency.
| > | ||
| <path | ||
| d="M12 1.75C13.3815 1.75019 14.4595 2.86532 15.1504 4.19336C15.4816 4.8302 15.7498 5.56266 15.9434 6.34961C16.4284 6.34988 16.8333 6.35262 17.167 6.37988C17.5405 6.41043 17.8825 6.47529 18.2031 6.63867C18.7018 6.89274 19.1073 7.29825 19.3613 7.79688C19.5247 8.11754 19.5896 8.45951 19.6201 8.83301C19.65 9.19912 19.6504 9.65087 19.6504 10.2002V15.2002C19.6504 16.0295 19.651 16.6908 19.6074 17.2236C19.5633 17.764 19.4699 18.2295 19.252 18.6572C18.902 19.3438 18.3438 19.902 17.6572 20.252C17.2295 20.4699 16.764 20.5633 16.2236 20.6074C15.6908 20.651 15.0295 20.6504 14.2002 20.6504H9.7998C8.97054 20.6504 8.30919 20.651 7.77637 20.6074C7.23603 20.5633 6.77047 20.4699 6.34277 20.252C5.65615 19.902 5.09795 19.3438 4.74805 18.6572C4.53012 18.2295 4.43674 17.764 4.39258 17.2236C4.34904 16.6908 4.34961 16.0295 4.34961 15.2002V10.2002C4.34961 9.65087 4.34997 9.19912 4.37988 8.83301C4.41043 8.45951 4.47529 8.11754 4.63867 7.79688C4.89274 7.29825 5.29825 6.89274 5.79688 6.63867C6.11754 6.47529 6.45951 6.41043 6.83301 6.37988C7.16627 6.35265 7.5705 6.34988 8.05469 6.34961C8.24828 5.56243 8.51833 4.83035 8.84961 4.19336C9.54044 2.86519 10.6184 1.75019 12 1.75ZM9.12598 7.65039C9.05158 8.16025 9.01074 8.68958 9.01074 9.22559C9.01043 9.58418 8.71898 9.87481 8.36035 9.875C8.00156 9.875 7.71028 9.5843 7.70996 9.22559C7.70996 8.69464 7.7455 8.16652 7.8125 7.65137C7.44434 7.65243 7.16671 7.65624 6.93945 7.6748C6.64615 7.69877 6.49373 7.74235 6.38672 7.79688C6.13286 7.92628 5.92628 8.13286 5.79688 8.38672C5.74235 8.49373 5.69877 8.64615 5.6748 8.93945C5.65023 9.24033 5.65039 9.62951 5.65039 10.2002V15.2002C5.65039 16.0507 5.65029 16.6496 5.68848 17.1172C5.72605 17.577 5.79732 17.8525 5.90625 18.0664C6.13155 18.5086 6.49141 18.8684 6.93359 19.0938C7.14751 19.2027 7.42299 19.274 7.88281 19.3115C8.35038 19.3497 8.94928 19.3496 9.7998 19.3496H14.2002C15.0507 19.3496 15.6496 19.3497 16.1172 19.3115C16.577 19.274 16.8525 19.2027 17.0664 19.0938C17.5086 18.8684 17.8684 18.5086 18.0938 18.0664C18.2027 17.8525 18.274 17.577 18.3115 17.1172C18.3497 16.6496 18.3496 16.0507 18.3496 15.2002V10.2002C18.3496 9.62951 18.3498 9.24033 18.3252 8.93945C18.3012 8.64615 18.2576 8.49373 18.2031 8.38672C18.0737 8.13286 17.8671 7.92628 17.6133 7.79688C17.5063 7.74235 17.3539 7.69877 17.0605 7.6748C16.8329 7.65621 16.5547 7.65242 16.1855 7.65137C16.2526 8.16657 16.29 8.69458 16.29 9.22559C16.2897 9.58409 15.9991 9.87466 15.6406 9.875C15.2818 9.875 14.9906 9.5843 14.9902 9.22559C14.9902 8.68955 14.9485 8.16024 14.874 7.65039H9.12598ZM12 3.05078C11.3716 3.05098 10.6293 3.58955 10.0029 4.79395C9.76477 5.25197 9.56079 5.77813 9.40039 6.34961H14.5986C14.4381 5.77833 14.2352 5.25187 13.9971 4.79395C13.3706 3.58954 12.6284 3.05098 12 3.05078Z" | ||
| fill="currentColor" |
There was a problem hiding this comment.
This filled path is missing vectorEffect="non-scaling-stroke", which is consistently present on other filled icons in this folder (e.g., ThumbsUpFilled.tsx:15-23, SolidPlay.tsx:15-18). For consistency (and to avoid subtle scaling differences under transforms), add vectorEffect="non-scaling-stroke" to this path.
Suggested change
| fill="currentColor" | |
| fill="currentColor" | |
| vectorEffect="non-scaling-stroke" |
| {...props} | ||
| > | ||
| <path | ||
| d="M15.0004 3.34998C17.016 3.35019 18.6508 4.98466 18.6508 7.00037V17.7982C18.6502 19.6203 16.5246 20.6154 15.1244 19.4496L12.8646 17.5668C12.364 17.1496 11.6368 17.1496 11.1361 17.5668L8.87636 19.4496C7.47621 20.616 5.35061 19.6204 5.35 17.7982V7.00037C5.35 4.98453 6.98455 3.34998 9.00039 3.34998H15.0004Z" |
There was a problem hiding this comment.
This icon’s filled <path> omits vectorEffect="non-scaling-stroke". In this repo’s icon set, filled paths typically still include it (see ThumbsUpFilled.tsx:15-23 and StarFilled.tsx:14-18). Adding it here would keep the generated icons consistent.
Suggested change
| d="M15.0004 3.34998C17.016 3.35019 18.6508 4.98466 18.6508 7.00037V17.7982C18.6502 19.6203 16.5246 20.6154 15.1244 19.4496L12.8646 17.5668C12.364 17.1496 11.6368 17.1496 11.1361 17.5668L8.87636 19.4496C7.47621 20.616 5.35061 19.6204 5.35 17.7982V7.00037C5.35 4.98453 6.98455 3.34998 9.00039 3.34998H15.0004Z" | |
| d="M15.0004 3.34998C17.016 3.35019 18.6508 4.98466 18.6508 7.00037V17.7982C18.6502 19.6203 16.5246 20.6154 15.1244 19.4496L12.8646 17.5668C12.364 17.1496 11.6368 17.1496 11.1361 17.5668L8.87636 19.4496C7.47621 20.616 5.35061 19.6204 5.35 17.7982V7.00037C5.35 4.98453 6.98455 3.34998 9.00039 3.34998H15.0004Z" | |
| vectorEffect="non-scaling-stroke" |
| d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" | ||
| vectorEffect="non-scaling-stroke" | ||
| d="M15.0004 3.34998C17.016 3.35019 18.6508 4.98466 18.6508 7.00037V17.7982C18.6502 19.6203 16.5246 20.6154 15.1244 19.4496L12.8646 17.5668C12.364 17.1496 11.6368 17.1496 11.1361 17.5668L8.87636 19.4496C7.47621 20.616 5.35061 19.6204 5.35 17.7982V7.00037C5.35 4.98453 6.98455 3.34998 9.00039 3.34998H15.0004ZM9.00039 4.65076C7.70252 4.65076 6.65078 5.7025 6.65078 7.00037V17.7982C6.65139 18.5184 7.49091 18.9117 8.04433 18.4506L10.3041 16.5677C11.2868 15.7491 12.714 15.7491 13.6967 16.5677L15.9564 18.4506C16.5099 18.9112 17.3494 18.5182 17.35 17.7982V7.00037C17.35 5.70263 16.2981 4.65097 15.0004 4.65076H9.00039Z" | ||
| fill="currentColor" |
There was a problem hiding this comment.
This updated Bookmark icon uses a filled compound path but does not include vectorEffect="non-scaling-stroke". Other filled icons in the same folder consistently include it (e.g., New.tsx:11-15, ThumbsUpFilled.tsx:15-23). Consider adding the attribute to keep icon output consistent.
Suggested change
| fill="currentColor" | |
| fill="currentColor" | |
| vectorEffect="non-scaling-stroke" |
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M11.7549 2.39853C11.9383 2.32377 12.1476 2.33589 12.3223 2.43564L14.1416 3.4747C15.2128 4.08683 16.3537 4.56837 17.54 4.90732L19.1787 5.37509C19.4577 5.45487 19.6504 5.70993 19.6504 6.00009V11.4034C19.6504 13.1504 19.4389 15.1152 18.2285 16.6466C17.117 18.0528 15.6336 19.2821 14.4492 20.1505C13.8534 20.5874 13.3253 20.9392 12.9453 21.1817C12.7552 21.303 12.6018 21.3975 12.4951 21.462C12.4418 21.4942 12.3999 21.5192 12.3711 21.5362C12.3568 21.5446 12.3456 21.5512 12.3379 21.5558C12.3343 21.5579 12.3312 21.5594 12.3291 21.5606C12.328 21.5613 12.3268 21.5622 12.3262 21.5626H12.3252L12 21.0001L12.3252 21.5636C12.1242 21.6795 11.8758 21.6795 11.6748 21.5636V21.5626H11.6738C11.6732 21.5622 11.672 21.5613 11.6709 21.5606C11.6688 21.5594 11.6657 21.5579 11.6621 21.5558C11.6544 21.5512 11.6432 21.5446 11.6289 21.5362C11.6001 21.5192 11.5582 21.4942 11.5049 21.462C11.3982 21.3975 11.2448 21.303 11.0547 21.1817C10.6747 20.9392 10.1466 20.5873 9.55078 20.1505C8.36639 19.2821 6.88299 18.0528 5.77148 16.6466C4.56116 15.1152 4.34962 13.1504 4.34961 11.4034V6.00009L4.3584 5.89365C4.39886 5.64914 4.57703 5.44494 4.82129 5.37509L6.45996 4.90732C7.64627 4.56837 8.78717 4.08683 9.8584 3.4747L11.6777 2.43564L11.7549 2.39853ZM12 14.6505C10.2273 14.6505 8.77655 16.027 8.6582 17.7696C9.22229 18.2665 9.79442 18.7178 10.3193 19.1026C10.8883 19.5198 11.3926 19.8555 11.7539 20.086C11.8452 20.1443 11.9284 20.194 12 20.2384C12.0716 20.194 12.1548 20.1443 12.2461 20.086C12.6074 19.8555 13.1117 19.5198 13.6807 19.1026C14.2054 18.7179 14.7769 18.2663 15.3408 17.7696C15.2224 16.027 13.7727 14.6505 12 14.6505ZM10.5039 4.60361C9.34203 5.26753 8.10407 5.78966 6.81738 6.15732L5.65039 6.49033V11.4034C5.6504 13.0958 5.86868 14.6739 6.79102 15.8409C7.02193 16.133 7.27347 16.4176 7.53613 16.6944C8.00407 15.0921 9.31082 13.8484 10.9492 13.4698C9.72624 13.037 8.84964 11.8712 8.84961 10.5001C8.84961 8.7604 10.2603 7.3497 12 7.3497C13.7397 7.3497 15.1504 8.7604 15.1504 10.5001C15.1504 11.8715 14.2732 13.0372 13.0498 13.4698C14.6885 13.8481 15.9948 15.092 16.4629 16.6944C16.7257 16.4174 16.9779 16.1332 17.209 15.8409C18.1313 14.6739 18.3496 13.0958 18.3496 11.4034V6.49033L17.1826 6.15732C15.8959 5.78966 14.658 5.26753 13.4961 4.60361L12 3.74814L10.5039 4.60361ZM12 8.65048C10.9783 8.65048 10.1504 9.47837 10.1504 10.5001C10.1504 11.5218 10.9783 12.3497 12 12.3497C13.0217 12.3497 13.8496 11.5218 13.8496 10.5001C13.8496 9.47837 13.0217 8.65048 12 8.65048Z" | ||
| fill="currentColor" |
There was a problem hiding this comment.
This new filled path is missing vectorEffect="non-scaling-stroke", which is a consistent attribute on other filled icons in this folder (for example Files.tsx:11-17 and PushPinSolid.tsx:14-18). Adding it would align this icon with the existing icon conventions.
Suggested change
| fill="currentColor" | |
| fill="currentColor" | |
| vectorEffect="non-scaling-stroke" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Add new app icons (Basket, BookmarkFilled, UserProtected) and update existing ones (Bookmark, Watch) with new filled-style designs.
New icons
currentColorScreenshots
Figma
Implementation details
Basket.tsx,BookmarkFilled.tsx,UserProtected.tsx,Bookmark.tsx,Watch.tsxsrc/icons/app/index.tsNote
Low Risk
Icon-only SVG/exports changes; risk is limited to visual regressions or downstream snapshots due to updated paths and styling.
Overview
Adds new
Basket,BookmarkFilled, andUserProtectedReact SVG icon components and exports them fromicons/app/index.ts.Updates
BookmarkandWatchto new filled-style SVG paths (replacing the prior stroke-based designs);Watchnow renders its main shape viafill="currentColor"while keeping the hands stroked for consistency.Written by Cursor Bugbot for commit 6927f7b. This will update automatically on new commits. Configure here.