refactor: replace neoicon with nuxt icon (5)

[preschian]

Thank you for your contribution to the Koda - Generative Art Marketplace.

👇 __ Let's make a quick check before the contribution.

PR Type

• [ ] Bugfix
• [ ] Feature
• [x] Refactoring

Context

• [x] part of #796

Summary by CodeRabbit

• Style
  • Updated all icons across the application to use a new icon component, resulting in a refreshed and consistent icon appearance.
  • Icon names and styles have been standardized throughout the user interface.
• Chores
  • Removed unused icon-related files and components, streamlining the codebase.

[coderabbitai[bot]]

Walkthrough

This change replaces all usages of the NeoIcon component with the KIcon component across a wide range of Vue components and pages. Icon references are updated to use the new KIcon naming convention, typically switching from simple or FontAwesome-based names to fully qualified icon names prefixed with i-mdi: or similar. All imports and registrations of NeoIcon are removed, and any associated Storybook story is deleted. No logic, control flow, or exported/public entity signatures are changed, except for a minor prop default update in one component.

Changes

Files/Paths (Grouped)	Change Summary
components/common/autoTeleport/AutoTeleportWelcomeModal.vue components/common/successfulModal/ShareSocialsSection.vue components/drops/CreateCalendarEventModal.vue components/explore/FilterMenuButton.vue components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemBuy.vue components/identity/module/IdentityChain.vue components/identity/module/IdentitySocial.vue components/items/ItemsGrid/ItemsGridImage.vue components/items/ItemsGrid/ItemsGridImageTokenEntity.vue components/massmint/Massmint.vue components/profile/CuratedDrops.vue components/profile/ProfileDetail.vue components/profile/create/SelectImageField.vue components/profile/create/stages/Form.vue components/search/SearchSuggestion.vue components/shared/PillTabs.vue components/shared/SigningModal/SigningModalBody.vue components/shared/TabItem.vue components/shared/TransactionSteps/TransactionStepsItem.vue components/shared/audioPlayer/AudioPlayer.vue components/shared/collapse/CollapseCardWrapper.vue components/shared/collapse/CollapseWrapper.vue components/shared/filters/modules/SiderbarFilterSection.vue components/shared/gallery/NeoTag.vue components/trade/TradeExpiration.vue components/trade/TradeOwnerButton.vue components/trade/TradePriceInput.vue components/trade/overviewModal/TokenInCollection.vue components/transfer/Transfer.vue components/transfer/TransferConfirmModal.vue components/shared/DragDrop.vue	Replaced all usages of NeoIcon component with KIcon component. Updated icon prop names and icon identifiers to match new conventions (e.g., :icon to :name, icon names to i-mdi: format). Removed imports and registrations of NeoIcon. No logic or control flow changes except for a prop default value update in DragDrop.vue.
libs/ui/src/components/NeoIcon/NeoIcon.story.vue	Deleted the Storybook story for NeoIcon.
pages/carbonless.vue pages/drop-checker/[chain]/[collection].vue pages/sustainability.vue	Replaced NeoIcon with KIcon for icon rendering; removed NeoIcon imports and registrations.

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

• kodadot/nft-gallery#11539: Installs MDI icons locally to ensure consistent rendering, which directly supports this PR's migration to KIcon with i-mdi: icons.
• kodadot/nft-gallery#11499: Also replaces NeoIcon with KIcon across components, indicating a related or complementary refactor.

Suggested reviewers

• vikiival
• Jarsen136
• hassnian

Poem

Hopping through code, I tidy with glee,
Swapping old icons for KIcon, you see!
From NeoIcon's burrow, new names take flight—
i-mdi: carrots shining so bright.
The garden of UI now sparkles anew,
With every fresh icon, a bug or two fewer—
🥕✨ Cheers to the code that rabbits pursue!

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[netlify[bot]]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	7f47d70fd25c31abb04e090a266262355749945a
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6811dff00b66d10008528523
😎 Deploy Preview	https://deploy-preview-11501--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cloudflare-workers-and-pages[bot]]

Deploying koda-art-prod with    Cloudflare Pages

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

View logs

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud