feat: pre-bundle used icons into @nuxt/icon client bundle#6633
Draft
benjamincanac wants to merge 2 commits into
Draft
feat: pre-bundle used icons into @nuxt/icon client bundle#6633benjamincanac wants to merge 2 commits into
@nuxt/icon client bundle#6633benjamincanac wants to merge 2 commits into
Conversation
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.
commit: |
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
1 participant
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.
🔗 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'sclientBundle.scancan't discover them and they end up fetched at runtime, causing a flash on first paint.This hooks into
icon:clientBundleIconsand adds those icons to the client bundle so they're embedded at build time. The icons come from the resolvedapp.config.ui.icons, so overrides that stay within a shipped collection are picked up too.To stay safe, an icon is only added when its collection data is actually installed, resolved from
rootDir/workspaceDirto match how@nuxt/iconloads it. Anything it can't find is left to runtime loading rather than failing the build, and the lookup hits the filesystem directly so it stays correct under the dev stub too.Important
This depends on nuxt/icon#502, which makes the client bundle resolve collections from
rootDir/workspaceDirinstead ofprocess.cwd()(without it, monorepo/workspace builds break). It currently points at the pkg.pr.new build of that PR, so this stays a draft until #502 is released and the dependency is bumped to a normal version.