Navigation bar does not show icons when using slidev used in iframe

[taran13m]

Description

Navigation bar icons in Slidev presentations do not render when the built presentation is embedded in an iframe, even when using Slidev's default/native configuration without any custom UnoCSS setup.

The icon elements are present in the DOM with correct class names (e.g., i-carbon:maximize, i-carbon:arrow-left, i-carbon:arrow-right, etc.) but have computed styles showing:

• width: 0px
• height: 0px
• display: block
• mask-image: none (no mask image applied)
• background-color: rgba(0, 0, 0, 0) (transparent)

This indicates that UnoCSS's icon preset is not being applied during the build process, even though Slidev should handle this automatically.

Minimal reproduction

Steps to reproduce the behavior:

1. Create a new Slidev project with a custom theme:

   npm create slidev@latest

2. Create a custom theme in theme/ directory with basic styling (CSS only, no UnoCSS configuration)

3. Use only native Slidev dependencies in package.json:

   {
     "dependencies": {
       "@slidev/cli": "latest",
       "@slidev/theme-default": "latest"
     }
   }

4. Do not add any custom UnoCSS configuration files (uno.config.ts or slidev.config.ts)

5. Build the presentation:

   slidev build slides.md --base /slides/presentation/ --out ./output

6. Embed the built output in an iframe in another application:

   <iframe 
     src="/slides/presentation/index.html" 
     style="width: 100%; height: 600px;"
   />

7. Navigate to the page with the iframe

8. Observe that navigation icons appear invisible/missing

9. Inspect the icon elements in browser DevTools:

   // Inside iframe
   const icon = document.querySelector('.i-carbon\\:maximize');
   const styles = window.getComputedStyle(icon);
   console.log({
     width: styles.width,           // "0px"
     height: styles.height,          // "0px"
     maskImage: styles.maskImage,    // "none"
     backgroundColor: styles.backgroundColor  // "rgba(0, 0, 0, 0)"
   });

Expected behavior

The navigation icons should render properly with:

• Proper width/height (e.g., 1.2em)
• mask-image property set with the icon SVG
• background-color set to currentColor or appropriate color

Screenshots

Navigation bar appears with invisible icons. The buttons have accessible labels but no visible graphics.

Environment

• Slidev version: 52.2.4
• Browser: Chrome/Safari (latest)
• OS: macOS 24.6.0
• Node version: (latest LTS)
• Installation method: Local project (npm install @slidev/cli)
• Build command: slidev build slides.md --base /slides/presentation/ --out ./output
• Theme: Custom theme (minimal CSS only, no custom UnoCSS config)
• Important: Using Slidev's native/default UnoCSS configuration (no custom uno.config.ts or slidev.config.ts)

Additional context

• Icons work correctly in development mode (slidev slides.md)
• Issue only occurs in production build when embedded in iframe
• The icon class names are correctly applied (e.g., i-carbon:maximize)
• The UnoCSS icon preset styles are completely missing from the built output
• This suggests Slidev's build process is not including the necessary UnoCSS icon preset CSS when building for production
• No custom UnoCSS configuration was added - relying entirely on Slidev's built-in defaults

Debugging evidence

Computed styles from browser DevTools showing icons have no dimensions or mask images applied, despite having correct class names:

{
  className: "i-carbon:maximize",
  width: "0px",
  height: "0px",
  display: "block",
  maskImage: "none",
  backgroundColor: "rgba(0, 0, 0, 0)"
}