feat(module): pre-bundle used icons into `@nuxt/icon` client bundle by benjamincanac · Pull Request #6633 · nuxt/ui

benjamincanac · 2026-06-25T09:28:04Z

🔗 Linked issue

Resolves #6295

📚 Description

Nuxt UI components rely on a fixed set of icons (chevrons, the loading spinner, close buttons, and so on) that live inside node_modules, so @nuxt/icon's clientBundle.scan can't discover them and they end up fetched at runtime, causing a flash on first paint.

This hooks into icon:clientBundleIcons and adds those icons to the client bundle so they're embedded at build time. The icons come from the resolved app.config.ui.icons, so overrides that stay within a shipped collection are picked up too.

Names are restricted to the collections Nuxt UI ships its defaults in (currently lucide) so multi-word collection names can't be mis-split. Anything @nuxt/icon still can't resolve (collection not installed, icon name missing) is dropped and falls back to runtime loading instead of failing the build, so no availability check is needed on our side.

Important

Requires @nuxt/icon@>=2.2.5, which ships the two changes this relies on: nuxt/icon#502 (resolve the client bundle from rootDir/workspaceDir instead of process.cwd(), so monorepo/workspace builds work) and nuxt/icon#504 (treat hook-contributed icons as best-effort, dropping unresolvable ones instead of throwing). The dependency has been bumped to ^2.2.5.

Add the icons Nuxt UI uses (chevrons, loading spinner, close, etc.) to `@nuxt/icon`'s client bundle via the `icon:clientBundleIcons` hook so they're embedded at build time instead of fetched at runtime, removing the first-paint flash. Icons are only added when their collection data is installed (resolved from `rootDir`/`workspaceDir` to match `@nuxt/icon`), so missing collections fall back to runtime loading instead of failing the build. Resolves #6295

Temporary: relies on nuxt/icon#502 (client bundle resolves collections from rootDir/workspaceDir). Revert to a normal version once it's released.

pkg-pr-new · 2026-06-25T09:39:17Z

npm i https://pkg.pr.new/@nuxt/ui@6633

commit: 104f532

socket-security · 2026-06-30T10:00:53Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@nuxt/icon@2.2.4 ⏵ 2.2.5	⁺¹		⁺¹	⁺¹

View full report

coderabbitai · 2026-06-30T10:23:14Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 02889910-67bb-4e52-a08d-a7b84d66696f

📥 Commits

Reviewing files that changed from the base of the PR and between 552e77d and 104f532.

📒 Files selected for processing (1)

docs/content/docs/1.getting-started/6.integrations/1.icons/1.nuxt.md

✅ Files skipped from review due to trivial changes (1)

docs/content/docs/1.getting-started/6.integrations/1.icons/1.nuxt.md

📝 Walkthrough

Walkthrough

A new src/utils/icons.ts file introduces toBundleName, trustedCollections, and getClientBundleIcons to parse Nuxt UI icon class strings into @nuxt/icon bundle names. src/module.ts imports the utility and registers an icon:clientBundleIcons hook that adds resolved names to the client bundle set. @nuxt/icon is bumped to ^2.2.5, with a workspace exclusion for that version. Documentation and tests were updated to cover build-time bundling behavior and icon source notes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: pre-bundling used icons into the `@nuxt/icon` client bundle.
Description check	✅ Passed	The description matches the changeset and accurately explains the icon bundling, overrides, and dependency bump.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/pre-bundle-icons

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

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/content/docs/1.getting-started/6.integrations/1.icons/1.nuxt.md`:
- Around line 135-137: The note in the icons docs is too broad and should only
apply to overrides from untrusted or uninstalled collections, not all
app.config.ts icon overrides. Update the wording in the relevant docs note to
reflect that getClientBundleIcons in src/module.ts bundles overrides from
shipped collections like lucide, and direct users to clientBundle.icons only for
icons that are not already available locally.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 895150c9-f610-42d2-8c5b-8f7b21a6312f

📥 Commits

Reviewing files that changed from the base of the PR and between a84de85 and 1b9050c.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (6)

docs/content/docs/1.getting-started/6.integrations/1.icons/1.nuxt.md
package.json
pnpm-workspace.yaml
src/module.ts
src/utils/icons.ts
test/utils/icons.spec.ts

benjamincanac added 2 commits June 25, 2026 11:27

chore: use @nuxt/icon pkg.pr.new build for nuxt/icon#502

946c21e

Temporary: relies on nuxt/icon#502 (client bundle resolves collections from rootDir/workspaceDir). Revert to a normal version once it's released.

github-actions Bot added the v4 #4488 label Jun 25, 2026

benjamincanac added the pending label Jun 25, 2026

vercel Bot deployed to Preview – ui June 25, 2026 09:40 View deployment

benjamincanac mentioned this pull request Jun 25, 2026

feat(unplugin): pre-bundle used icons into the Vue/Vite build #6635

Merged

benjamincanac changed the title ~~feat: pre-bundle used icons into @nuxt/icon client bundle~~ feat(module): pre-bundle used icons into @nuxt/icon client bundle Jun 29, 2026

Merge branch 'v4' into feat/pre-bundle-icons

add0e21

vercel Bot deployed to Preview – ui June 29, 2026 13:06 View deployment

benjamincanac mentioned this pull request Jun 29, 2026

fix: don't hard-fail on unresolvable hook-contributed client bundle icons nuxt/icon#504

Merged

refactor: rely on nuxt/icon#504 to skip unresolvable bundle icons

2ff48fd

vercel Bot deployed to Preview – ui June 29, 2026 13:40 View deployment

docs: document icon client bundle and override boundary

ed38a73

vercel Bot deployed to Preview – ui June 29, 2026 13:56 View deployment

up

1b9050c

vercel Bot deployed to Preview – ui June 30, 2026 10:15 View deployment

benjamincanac removed the pending label Jun 30, 2026

benjamincanac marked this pull request as ready for review June 30, 2026 10:19

coderabbitai Bot reviewed Jun 30, 2026

View reviewed changes

Comment thread docs/content/docs/1.getting-started/6.integrations/1.icons/1.nuxt.md

benjamincanac added 2 commits June 30, 2026 12:42

docs: note vscode-icons collection for prose code filename icons

2c6ff7a

docs: correct icon override note wording

552e77d

vercel Bot deployed to Preview – ui June 30, 2026 11:02 View deployment

docs: align icon bundle note wording with override note

104f532

atinux approved these changes Jun 30, 2026

View reviewed changes

vercel Bot deployed to Preview – ui June 30, 2026 12:38 View deployment

benjamincanac merged commit 8d46034 into v4 Jun 30, 2026
24 checks passed

benjamincanac deleted the feat/pre-bundle-icons branch June 30, 2026 12:39

benjamincanac mentioned this pull request Jun 30, 2026

Pre-bundle used icons #6295

Closed

fkwww27 mentioned this pull request Jul 20, 2026

Lucide icon bundle warnings even when Lucide is not used #6755

Open

coderabbitai Bot mentioned this pull request Jul 21, 2026

Pre-bundled icons must reflect overrides in the app configuration #6763

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(module): pre-bundle used icons into `@nuxt/icon` client bundle#6633

feat(module): pre-bundle used icons into `@nuxt/icon` client bundle#6633
benjamincanac merged 9 commits into
v4from
feat/pre-bundle-icons

benjamincanac commented Jun 25, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jun 25, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Jun 30, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 30, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

benjamincanac commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

📚 Description

Uh oh!

pkg-pr-new Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

benjamincanac commented Jun 25, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 25, 2026 •

edited

Loading

socket-security Bot commented Jun 30, 2026 •

edited

Loading

coderabbitai Bot commented Jun 30, 2026 •

edited

Loading