fix(icons): use icon exports in ejected skins

[sampotts]

Summary

• Adds public icon re-export entrypoints through @videojs/html/icons, @videojs/html/icons/*, @videojs/react/icons, and @videojs/react/icons/* so generated/ejected code no longer imports from private @videojs/icons/* paths.
• Generates ejected HTML skins with <media-icon> elements instead of inline SVG markup, while React ejected skins keep component icon imports from public @videojs/react/icons paths.
• Splits HTML SVG string exports from media-icon registration: @videojs/html/icons is export-only, and @videojs/html/icons/element is the side-effectful custom-element registration path.
• Adds default and minimal media-icon element entrypoints so consumers and CDN skins can eagerly register one icon family when that is preferable.
• Updates the private @videojs/icons element build to support lazy family loading through loaders, pending-load de-duping, instance re-rendering, and SSR-safe custom-element registration guards.
• Bundles the relevant icon family into the CDN UI skin entrypoints instead of loading icon definitions from a separate CDN file.
• Keeps React package skin source on local @/icons imports and rewrites those imports to public @videojs/react/icons paths when ejected snippets are generated.
• Updates sandbox and e2e generated pages to use the new public icon entrypoints.
• Updates package side-effect metadata and tsdown moduleSideEffects so define/* modules and icons/(dist/)?element/* registration modules are preserved while plain icon string exports remain tree-shakeable.
• Updates icon package docs and adds focused HTML icon tests covering export-only imports, lazy media-icon loading, unknown families, missing icons, and family-specific registration.
• Keeps the site Vite optimizer from pre-bundling @resvg/resvg-js, which preserves the existing server-only OG image route behavior during this workspace update.

Closes #1478

Validation

• pnpm -F @videojs/icons build
• pnpm -F @videojs/html test src/icons/tests/index.test.ts
• pnpm -F @videojs/html build
• pnpm -F @videojs/html build:cdn
• pnpm -F @videojs/react build
• pnpm -F site ejected-skins
• pnpm typecheck
• pnpm check:workspace
• pnpm lint:fix:file <changed files>
• git diff --check

---

Note

^{Cursor Bugbot is generating a summary for commit 4aa342e. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Apr 29, 2026 1:54am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	4aa342e
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69f164bfae13a400088e45ef
😎 Deploy Preview	https://deploy-preview-1489--vjs10-site.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 project configuration.

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	28.80 kB
/video (default + hls)	162.26 kB
/video (minimal)	26.27 kB
/video (minimal + hls)	159.65 kB
/audio (default)	26.66 kB
/audio (minimal)	24.23 kB
/background	4.16 kB

Media (8)

Entry	Size
/media/background-video	1.04 kB
/media/container	1.72 kB
/media/dash-video	236.58 kB
/media/hls-video	134.69 kB
/media/mux-audio	160.91 kB
/media/mux-video	160.85 kB
/media/native-hls-video	4.62 kB
/media/simple-hls-video	16.01 kB

Players (3)

Entry	Size
/video/player	7.00 kB
/audio/player	5.12 kB
/background/player	3.86 kB

Skins (29)

Entry	Type	Size
/video/minimal-skin.css	css	3.53 kB
/video/skin.css	css	3.56 kB
/video/minimal-skin	js	26.27 kB
/video/minimal-skin.tailwind	js	26.49 kB
/video/skin	js	28.78 kB
/video/skin.tailwind	js	28.89 kB
/audio/minimal-skin.css	css	2.55 kB
/audio/skin.css	css	2.52 kB
/audio/minimal-skin	js	24.19 kB
/audio/minimal-skin.tailwind	js	24.40 kB
/audio/skin	js	26.65 kB
/audio/skin.tailwind	js	26.78 kB
/background/skin.css	css	117 B
/background/skin	js	1.15 kB
/live-video/minimal-skin.css	css	3.53 kB
/live-video/skin.css	css	3.56 kB
/live-video/minimal-skin	js	26.04 kB
/live-video/minimal-skin.tailwind	js	26.16 kB
/live-video/skin	js	28.51 kB
/live-video/skin.tailwind	js	28.59 kB
/live-audio/minimal-skin.css	css	2.55 kB
/live-audio/skin.css	css	2.52 kB
/live-audio/minimal-skin	js	24.06 kB
/live-audio/minimal-skin.tailwind	js	24.00 kB
/live-audio/skin	js	26.40 kB
/live-audio/skin.tailwind	js	26.46 kB
/base.css	css	157 B
/shared.css	css	88 B
/skin-element	js	1.36 kB

UI Components (25)

Entry	Size
/ui/alert-dialog	989 B
/ui/alert-dialog-close	465 B
/ui/alert-dialog-description	451 B
/ui/alert-dialog-title	369 B
/ui/buffering-indicator	2.49 kB
/ui/captions-button	2.59 kB
/ui/cast-button	2.62 kB
/ui/compounds	4.15 kB
/ui/controls	2.03 kB
/ui/error-dialog	3.10 kB
/ui/fullscreen-button	2.58 kB
/ui/hotkey	1.91 kB
/ui/mute-button	2.58 kB
/ui/pip-button	2.55 kB
/ui/play-button	2.56 kB
/ui/playback-rate-button	2.67 kB
/ui/popover	1.82 kB
/ui/poster	1.88 kB
/ui/seek-button	2.59 kB
/ui/slider	1.51 kB
/ui/thumbnail	2.96 kB
/ui/time	2.52 kB
/ui/time-slider	3.92 kB
/ui/tooltip	2.03 kB
/ui/volume-slider	2.66 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	23.53 kB
/video (default + hls)	155.68 kB
/video (minimal)	21.14 kB
/video (minimal + hls)	153.27 kB
/audio (default)	19.10 kB
/audio (minimal)	17.62 kB
/background	756 B

Media (7)

Entry	Size
/media/background-video	575 B
/media/dash-video	235.21 kB
/media/hls-video	133.34 kB
/media/mux-audio	159.31 kB
/media/mux-video	159.49 kB
/media/native-hls-video	3.13 kB
/media/simple-hls-video	14.55 kB

Skins (26)

Entry	Type	Size
/video/minimal-skin.css	css	3.46 kB
/video/skin.css	css	3.48 kB
/video/minimal-skin	js	21.05 kB
/video/minimal-skin.tailwind	js	24.58 kB
/video/skin	js	23.46 kB
/video/skin.tailwind	js	24.69 kB
/audio/minimal-skin.css	css	2.45 kB
/audio/skin.css	css	2.41 kB
/audio/minimal-skin	js	17.57 kB
/audio/minimal-skin.tailwind	js	20.05 kB
/audio/skin	js	19.03 kB
/audio/skin.tailwind	js	20.06 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	3.46 kB
/live-video/skin.css	css	3.48 kB
/live-video/minimal-skin	js	17.79 kB
/live-video/minimal-skin.tailwind	js	21.19 kB
/live-video/skin	js	20.18 kB
/live-video/skin.tailwind	js	21.36 kB
/live-audio/minimal-skin.css	css	2.45 kB
/live-audio/skin.css	css	2.41 kB
/live-audio/minimal-skin	js	15.79 kB
/live-audio/minimal-skin.tailwind	js	18.04 kB
/live-audio/skin	js	17.26 kB
/live-audio/skin.tailwind	js	18.21 kB

UI Components (20)

Entry	Size
/ui/alert-dialog	1.11 kB
/ui/buffering-indicator	1.85 kB
/ui/captions-button	2.03 kB
/ui/cast-button	2.04 kB
/ui/controls	1.89 kB
/ui/error-dialog	2.31 kB
/ui/fullscreen-button	2.03 kB
/ui/mute-button	2.05 kB
/ui/pip-button	2.03 kB
/ui/play-button	2.00 kB
/ui/playback-rate-button	2.02 kB
/ui/popover	1.87 kB
/ui/poster	1.74 kB
/ui/seek-button	2.10 kB
/ui/slider	3.33 kB
/ui/thumbnail	2.08 kB
/ui/time	2.54 kB
/ui/time-slider	3.00 kB
/ui/tooltip	2.17 kB
/ui/volume-slider	2.39 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (9)

Entry	Size
.	4.96 kB
/dom	11.93 kB
/dom/media/custom-media-element	1.90 kB
/dom/media/dash	234.36 kB
/dom/media/google-cast	4.07 kB
/dom/media/hls	132.72 kB
/dom/media/mux	158.81 kB
/dom/media/native-hls	2.52 kB
/dom/media/simple-hls	13.89 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	695 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.92 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	148 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (3)

Entry	Size
.	4.29 kB
/dom	13.40 kB
/playback-engine	13.26 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.

[mihar-22]

Awesome, few missing pieces:

1. The media-icon element that's built would need to support lazy loading of families/collections. It currently just loads all icons for both default/minimal. Screenshot below.
2. I'd probably remove loading icons from the CDN directly for now. We can figure this out at a later time when we're more confident with how we're packaging/shipping them.

See screenshot

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 866e3d4. Configure here.}

[mihar-22]

That all seems to look good to me! I guess only question which we briefly touched on in Slack is whether we want to use the media-icon in the HTML skins to be consistent with eject (not a blocker).

[sampotts]

That all seems to look good to me! I guess only question which we briefly touched on in Slack is whether we want to use the media-icon in the HTML skins to be consistent with eject (not a blocker).

Happy to do that if we prefer? I can do it in a follow-up PR.