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)"
}