refactor: replace neoicon with nuxt icon (5) #11501
Conversation
…nd SearchSuggestion components
…oss multiple components
WalkthroughThis change replaces all usages of the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant VueComponent
participant KIcon
User->>VueComponent: Interacts with UI (e.g., clicks button, opens modal)
VueComponent->>KIcon: Renders icon via <KIcon name="i-mdi:..." />
KIcon-->>VueComponent: Displays requested icon
VueComponent-->>User: Updates UI with new icon
Possibly related PRs
Suggested reviewers
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
✅ Deploy Preview for koda-canary ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
preschian
changed the title
Deploying koda-art-prod with
|
| Latest commit: |
7f47d70
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e9953c92.kodaart-production.pages.dev |
| Branch Preview URL: | https://refactor--replace-neo-icon-5.kodaart-production.pages.dev |
…replace-neo-icon-5
|
preschian
requested review from
vikiival,
Jarsen136 and
hassnian
and removed request for
a team
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (5)
components/profile/ProfileDetail.vue (1)
453-453: 🛠️ Refactor suggestionNeoIcon import should be removed if not used elsewhere in this file.
The NeoIcon import can be removed if the remaining instance on lines 183-188 is also migrated to KIcon.
-import { - NeoButton, - NeoDropdown, - NeoDropdownItem, - NeoIcon, -} from '@kodadot1/brick' +import { + NeoButton, + NeoDropdown, + NeoDropdownItem, +} from '@kodadot1/brick'pages/drop-checker/[chain]/[collection].vue (2)
68-72:⚠️ Potential issueMissing icon replacement.
There's still a
neo-iconcomponent here that needs to be replaced withKIconfollowing the same pattern as the other replacements.Apply this diff to fix the inconsistency:
- <neo-icon + <KIcon v-else - icon="xmark" + name="i-mdi:xmark" class="text-k-red" - /> + />
113-117:⚠️ Potential issueMissing icon replacement.
Another
neo-iconcomponent that needs to be replaced withKIconfollowing the same pattern as the other replacements.Apply this diff to fix the inconsistency:
- <neo-icon + <KIcon v-else - icon="xmark" + name="i-mdi:xmark" class="text-k-red" - /> + />components/profile/create/stages/Form.vue (1)
56-59: 🛠️ Refactor suggestionMissed icon update in markdown section
This NeoIcon instance was not updated to KIcon, but should be refactored for consistency with the rest of the codebase updates.
- <NeoIcon - icon="markdown" - pack="fab" - /> + <KIcon + name="i-fab:markdown" + />components/shared/DragDrop.vue (1)
20-25: 🛠️ Refactor suggestionIcon update needs cleanup of deprecated props.
While the icon component has been correctly updated to KIcon, there are leftover props (
custom-sizeandpack) that were specific to the NeoIcon component and might not be compatible with KIcon.<KIcon :name="icon" class="icon-size text-k-grey py-3" - custom-size="fa-2x" - pack="fass" />
🧹 Nitpick comments (1)
components/transfer/TransferConfirmModal.vue (1)
83-85: Proper dynamic icon toggle with KIcon
You've successfully replaced the old toggle icons withKIconand dynamicnameprops. For better accessibility, consider adding anaria-label(for example::aria-label="isExpandList ? 'Collapse recipients' : 'Expand recipients'").
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (35)
components/common/autoTeleport/AutoTeleportWelcomeModal.vue(2 hunks)components/common/successfulModal/ShareSocialsSection.vue(3 hunks)components/drops/CreateCalendarEventModal.vue(3 hunks)components/explore/FilterMenuButton.vue(2 hunks)components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemBuy.vue(2 hunks)components/identity/module/IdentityChain.vue(1 hunks)components/identity/module/IdentitySocial.vue(1 hunks)components/items/ItemsGrid/ItemsGridImage.vue(2 hunks)components/items/ItemsGrid/ItemsGridImageTokenEntity.vue(2 hunks)components/massmint/Massmint.vue(2 hunks)components/profile/CuratedDrops.vue(2 hunks)components/profile/ProfileDetail.vue(1 hunks)components/profile/create/SelectImageField.vue(2 hunks)components/profile/create/stages/Form.vue(2 hunks)components/search/SearchSuggestion.vue(2 hunks)components/shared/DragDrop.vue(3 hunks)components/shared/PillTabs.vue(1 hunks)components/shared/SigningModal/SigningModalBody.vue(2 hunks)components/shared/TabItem.vue(2 hunks)components/shared/TransactionSteps/TransactionStepsItem.vue(2 hunks)components/shared/audioPlayer/AudioPlayer.vue(3 hunks)components/shared/collapse/CollapseCardWrapper.vue(2 hunks)components/shared/collapse/CollapseWrapper.vue(2 hunks)components/shared/filters/modules/SiderbarFilterSection.vue(2 hunks)components/shared/gallery/NeoTag.vue(1 hunks)components/trade/TradeExpiration.vue(1 hunks)components/trade/TradeOwnerButton.vue(1 hunks)components/trade/TradePriceInput.vue(2 hunks)components/trade/overviewModal/TokenInCollection.vue(2 hunks)components/transfer/Transfer.vue(4 hunks)components/transfer/TransferConfirmModal.vue(2 hunks)libs/ui/src/components/NeoIcon/NeoIcon.story.vue(0 hunks)pages/carbonless.vue(1 hunks)pages/drop-checker/[chain]/[collection].vue(2 hunks)pages/sustainability.vue(1 hunks)
💤 Files with no reviewable changes (1)
- libs/ui/src/components/NeoIcon/NeoIcon.story.vue
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: shard (1, 10)
- GitHub Check: Cloudflare Pages: koda-art-prod
🔇 Additional comments (66)
components/shared/gallery/NeoTag.vue (1)
10-13: Successfully migrated from NeoIcon to KIcon.The change from NeoIcon to KIcon with the updated icon name format is correctly implemented. The proper icon naming convention
i-mdi:closeis used and the component passes the necessary props.pages/sustainability.vue (1)
4-4: Successfully migrated from NeoIcon to KIcon.The change from NeoIcon to KIcon with the updated icon name format is correctly implemented. The proper icon naming convention
i-mdi:leafis used.components/trade/TradeOwnerButton.vue (2)
21-21: Successfully migrated from NeoIcon to KIcon.The change from NeoIcon to KIcon with the updated icon name format is correctly implemented. The proper icon naming convention
i-mdi:repeatis used.
29-29: Successfully removed the NeoIcon import.The import statement has been correctly updated to remove NeoIcon since it's no longer used in this component.
components/trade/TradeExpiration.vue (1)
6-6: Icon component successfully refactored.The NeoIcon has been properly replaced with KIcon, updating the icon property from
icon="clock"toname="i-mdi:clock". This change aligns with the PR objective of replacing neoicon with nuxt icon while maintaining the same visual functionality.components/profile/create/SelectImageField.vue (2)
15-17: Icon component successfully refactored.The NeoIcon has been properly replaced with KIcon, using the standardized naming format with the Material Design Icons prefix (
i-mdi:upload).
41-41: Import statement correctly updated.The import statement has been properly updated to remove the now-unused NeoIcon import, leaving only the necessary components.
components/identity/module/IdentityChain.vue (1)
3-8: Icon component successfully refactored with slight visual change.The NeoIcon has been properly replaced with KIcon, changing from
icon="badge-check"withpack="fass"toname="i-mdi:check". Note that this changes the icon from a badge-check to a simple check, which might represent a slight visual difference but maintains the same semantic meaning.Please verify that the visual change from a badge-check to a simple check icon is intentional and acceptable for the UI design.
components/identity/module/IdentitySocial.vue (1)
9-10: LGTM! Icon replacement properly implemented.The replacement of
NeoIconwithKIconand updating the icon naming convention frompack="fab" icon="x-twitter"toname="i-ri:twitter-x-fill"looks good. This is consistent with the PR objective to replace neoicon with nuxt icon.components/trade/overviewModal/TokenInCollection.vue (2)
33-35: LGTM! Icon replacement properly implemented.The change from
NeoIcontoKIconwith updated naming convention looks good.
64-64: LGTM! Import statement properly updated.Import statement correctly updated to remove
NeoIconand keep onlyNeoButton.pages/drop-checker/[chain]/[collection].vue (2)
48-51: LGTM! Icon replacement properly implemented.The replacement of
NeoIconwithKIconand updating the naming convention looks good.
310-310: LGTM! Import statement properly updated.Import statement correctly updated to remove
NeoIcon.components/trade/TradePriceInput.vue (2)
28-31: LGTM! Icon replacement properly implemented.The replacement of
NeoIconwithKIconand updating the icon naming fromarrows-crosstoi-mdi:arrow-decisionlooks good.
55-55: LGTM! Import statement properly updated.Import statement correctly updated to remove
NeoIconand keep onlyNeoButton.components/shared/collapse/CollapseCardWrapper.vue (2)
19-19: Icon replacement looks good!The NeoIcon component has been correctly replaced with KIcon, updating the prop from
:iconto:nameand changing the icon values to the MDI namespaced format.
33-33: Import statement properly updatedThe NeoIcon import has been removed, keeping only the necessary NeoCollapse import.
components/shared/TransactionSteps/TransactionStepsItem.vue (2)
25-29: Icon replacement for error state looks good!The NeoIcon component has been correctly replaced with KIcon for the failed state, changing the prop from
icon="xmark"toname="i-mdi:close"while maintaining the same styling and size.
99-99: Import statement properly updatedThe NeoIcon import has been removed, keeping only the necessary NeoButton and NeoTooltip imports.
components/common/successfulModal/ShareSocialsSection.vue (3)
15-17: Twitter/X icon replacement looks good!The NeoIcon component has been correctly replaced with KIcon for the Twitter (now X) icon, using the Remix Icon library with the updated branding.
40-42: Telegram icon replacement looks good!The NeoIcon component has been correctly replaced with KIcon for the Telegram icon, using the Remix Icon library with the appropriate icon.
67-67: Import statement properly updatedThe NeoIcon import has been removed, keeping only the necessary NeoButton and NeoTooltip imports.
components/shared/SigningModal/SigningModalBody.vue (2)
28-31: Error icon replacement looks good!The NeoIcon component has been correctly replaced with KIcon for the error state, changing the prop from
icon="xmark"toname="i-mdi:close"while maintaining the same styling and size.
70-70: Import statement properly updatedThe NeoIcon import has been removed, keeping only the necessary NeoButton import.
components/profile/CuratedDrops.vue (2)
16-18: Icon component replacement looks goodThe replacement of
NeoIconwithKIconis implemented correctly, using the proper icon naming convention with thei-mdi:prefix.
83-83: Import cleanup is properly handledThe import statement has been correctly updated to remove the
NeoIconimport while keeping the necessary components from@kodadot1/brick.components/explore/FilterMenuButton.vue (2)
10-12: Icon replacement with conditional rendering is correctly implementedThe
KIconcomponent correctly maintains the conditional rendering logic from the original implementation, replacing both icon options with theiri-mdi:prefixed equivalents.
30-30: Import statement properly cleaned upThe import has been correctly updated to remove
NeoIconwhile keeping only the requiredNeoButtoncomponent.pages/carbonless.vue (1)
4-4: Icon replacement in page header is correctThe leaf icon has been properly migrated from
NeoIcontoKIconusing the standardi-mdi:prefix naming convention.components/shared/filters/modules/SiderbarFilterSection.vue (2)
18-18: Conditional icon replacement is well implementedThe conditional rendering of plus/minus icons has been correctly migrated to use
KIconwith the properi-mdi:prefixed naming convention.
29-29: Import statement cleanup is correctThe import has been properly updated to remove
NeoIconwhile keeping only the requiredNeoCollapsecomponent.components/shared/collapse/CollapseWrapper.vue (2)
14-16: Icon component and naming convention updated correctly.The
NeoIconcomponent has been properly replaced withKIcon, and the icon names have been updated to use thei-mdi:prefix convention. This change maintains the same functionality while aligning with the new icon system.
27-27: Import statement updated correctly.The import statement has been properly updated to remove
NeoIcon, keeping only the necessaryNeoCollapseimport from the@kodadot1/brickpackage.components/massmint/Massmint.vue (2)
9-10: Icon component and naming convention updated correctly.The
NeoIconcomponent has been properly replaced withKIcon, and the icon name has been updated fromarrow-lefttoi-mdi:arrow-leftto match the new naming convention.
106-106: Import statement updated correctly.The import statement has been properly updated to remove
NeoIcon, keeping only the necessaryNeoButtonimport from the@kodadot1/brickpackage.components/drops/CreateCalendarEventModal.vue (3)
28-28: Icon component updated correctly.The
NeoIconcomponent has been properly replaced withKIcon, maintaining the same functionality while using the new icon component.
38-38: Import statement updated correctly.The import statement has been properly updated to remove
NeoIcon, keeping only the necessaryNeoButtonandNeoModalimports from the@kodadot1/brickpackage.
58-58: Icon naming convention updated correctly.The icon name has been updated from
"google"to"i-mdi:google"to follow the new naming convention with thei-mdi:prefix.components/shared/TabItem.vue (3)
20-22: Icon component updated correctly.The
NeoIconcomponent has been properly replaced withKIcon, and the prop has been changed from:iconto:nameto match the new component's API.
30-30: Import statement updated correctly.The import statement has been properly updated to remove
NeoIcon, keeping only the necessaryNeoButtonimport from the@kodadot1/brickpackage.
54-54: Icon naming convention updated correctly in computed property.The icon name in the computed property has been updated from
'check'to'i-mdi:check'to match the new naming convention with thei-mdi:prefix.components/items/ItemsGrid/ItemsGridImageTokenEntity.vue (2)
49-56: Icon component replaced correctly.The
NeoIconcomponent has been properly replaced withKIcon, with the appropriate prop change from:iconto:nameand updated icon naming convention using the Material Design Icons format withi-mdi:prefix.
96-96: Import statement updated appropriately.The import statement has been correctly updated to remove
NeoIcon, keeping only the necessaryNeoButtonimport from the@kodadot1/brickpackage.components/common/autoTeleport/AutoTeleportWelcomeModal.vue (3)
31-35: Icon component replaced correctly.The
NeoIconcomponent has been properly replaced withKIcon, with the appropriate prop changes.
80-80: Import statement updated appropriately.The import statement has been correctly updated to remove
NeoIcon, keeping only the necessaryNeoButtonandNeoModalimports from the@kodadot1/brickpackage.
88-88: Icon names updated to use Material Design Icons format.Icon names have been properly updated to use the Material Design Icons format with the
i-mdi:prefix.components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemBuy.vue (2)
28-36: Icon component replaced correctly.The
NeoIconcomponent has been properly replaced withKIcon, with the appropriate prop change from:iconto:nameand updated icon naming convention using the Material Design Icons format withi-mdi:prefix.
53-53: Import statement updated appropriately.The import statement has been correctly updated to remove
NeoIcon, keeping only the necessaryNeoButtonimport from the@kodadot1/brickpackage.components/items/ItemsGrid/ItemsGridImage.vue (2)
44-51: Icon component replaced correctly.The
NeoIconcomponent has been properly replaced withKIcon, with the appropriate prop change from:iconto:nameand updated icon naming convention using the Material Design Icons format withi-mdi:prefix.
78-78: Import statement updated appropriately.The import statement has been correctly updated to remove
NeoIcon, keeping only the necessaryNeoButtonimport from the@kodadot1/brickpackage.components/profile/create/stages/Form.vue (3)
179-186: Import updates look good.Correctly removed NeoIcon from @kodadot1/brick imports and added KIcon import.
202-203: Icon update for website looks good.Correctly switched to KIcon with proper i-mdi prefix naming convention.
209-210: Icon update for Twitter looks good.Correctly switched to KIcon with proper i-ri prefix naming convention.
components/shared/audioPlayer/AudioPlayer.vue (3)
19-22: Play/pause icon update looks good.Correctly replaced NeoIcon with KIcon and updated icon naming to use the appropriate i-mdi prefix.
65-67: Volume icon update looks good.Correctly replaced NeoIcon with KIcon and updated icon naming to use the appropriate i-mdi prefix.
77-78: Import updates look good.Correctly removed NeoIcon from @kodadot1/brick imports, keeping only the necessary components.
components/shared/DragDrop.vue (2)
60-61: Import updates look good.Correctly removed NeoIcon from @kodadot1/brick imports, keeping only NeoUpload.
76-77: Default icon prop value updated correctly.Successfully updated the default icon value to use the new i-mdi prefix format.
components/search/SearchSuggestion.vue (2)
218-219: History icon update looks good.Correctly replaced NeoIcon with KIcon and updated icon naming to use the appropriate i-mdi prefix.
283-284: Import updates look good.Correctly removed NeoIcon from @kodadot1/brick imports, keeping only the necessary components.
components/transfer/TransferConfirmModal.vue (1)
158-158: Removal of deprecated NeoIcon import
TheNeoIconcomponent has been removed from the import list as it's no longer used—this cleanup is correct.components/transfer/Transfer.vue (5)
49-52: Icon update for "Pay Me" link
Replaced the old icon with<KIcon name="i-mdi:sack-percent" class="mr-2" />. Please verify this new symbol aligns with the intended design/specification for the “Pay Me” action.
63-66: Icon update for recurring payment link
Swapped out the previous icon for<KIcon name="i-mdi:rotate-3d-variant" class="mr-2" />. Confirm that this variant appropriately represents a recurring payment.
170-173: Deletion icon replacement (mobile view)
Good replacement of the delete button icon with<KIcon name="i-mdi:delete" class="p-3" />. Ensure the padding and sizing remain consistent with other delete controls.
245-248: Deletion icon replacement (desktop view)
Consistent swap to<KIcon name="i-mdi:delete" class="p-3" />for removing recipients. Looks correct.
272-275: Add recipient icon
Switched the add‐recipient icon to<KIcon name="i-mdi:plus" class="ml-2" />in line with the new icon strategy.
Thank you for your contribution to the Koda - Generative Art Marketplace.
👇 __ Let's make a quick check before the contribution.
PR Type
Context
Summary by CodeRabbit