Skip to content

[6.x] Avoid per-icon requests in the Icon storybook#14580

Merged
jasonvarga merged 1 commit into6.xfrom
icon-story-requests
Apr 30, 2026
Merged

[6.x] Avoid per-icon requests in the Icon storybook#14580
jasonvarga merged 1 commit into6.xfrom
icon-story-requests

Conversation

@jasonvarga
Copy link
Copy Markdown
Member

Summary

The AllIcons story in Icon.stories.ts renders all 537+ icons in the default set. Because the default set is registered with a lazy import.meta.glob (in resources/js/components/ui/Icon/registry.js), each icon triggers its own dynamic import. Cloudflare's abuse protection then 403s most of them, leaving the docs page broken.

This PR overrides the default set inside Icon.stories.ts with an eager glob ({ eager: true, query: '?raw', import: 'default' }) and re-registers it via registerIconSetFromStrings, so the Icon component takes the string-loading path and never makes HTTP requests for SVGs.

The change is scoped to the Storybook bundle — Icon.stories.ts is not part of the Control Panel entry, so the CP continues to lazy-load icons as before.

Test plan

  • Run npm run storybook and open Components / Icon / Available Icons.
  • Confirm all icons render and there are no per-icon requests / 403s in the Network tab.
  • Confirm the regular CP build still lazy-loads icons (no behavior change there).

The AllIcons story renders 537+ icons; with the lazy glob each one fired
its own request, tripping Cloudflare's abuse protection and 403'ing most
of them. Eagerly load and re-register the default set as strings so the
Storybook bundle inlines the SVGs. The CP keeps its lazy glob.
@jasonvarga jasonvarga merged commit fcc7119 into 6.x Apr 30, 2026
18 checks passed
@jasonvarga jasonvarga deleted the icon-story-requests branch April 30, 2026 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant