🐛 Bug Report: Carousel Navigation Icons Not Visible

[JakeLin]

Description

The Carousel component's prev/next navigation buttons are rendering but the chevron icons inside them are invisible. The buttons are functional (clickable) but users cannot see them.

Environment

• Package Version: @ainativekit/ui@0.1.0
• Build Tool: Vite 5.x
• Browser: Chrome/Safari/Firefox (all affected)
• Framework: React 18

Current Behavior

• Navigation buttons render with correct size and position
• Clicking where buttons should be works
• No visual chevron icons appear
• No 404 errors in Network tab
• CSS mask-image properties are present but icons don't show

Expected Behavior

ChevronLeftMd and ChevronRightMd icons should be visible in navigation buttons.

Reproduction

import { Carousel, Card } from '@ainativekit/ui';

<Carousel showNavigation={true}>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Carousel>

Result: Navigation buttons are invisible

Root Cause Analysis

SVG icons using CSS mask-image are not being properly bundled or resolved by Vite. The mask-image URLs likely point to non-existent or incorrectly transformed assets.

Proposed Solutions

Option 1: Inline Base64 SVG Data URIs (Recommended)

// In icon generation script
const svgContent = fs.readFileSync(svgPath, 'utf-8');
const base64 = Buffer.from(svgContent).toString('base64');

export const ChevronLeftMd = (props: IconProps) => (
  <Icon
    {...props}
    style={{
      maskImage: `url("data:image/svg+xml;base64,${base64}")`,
      WebkitMaskImage: `url("data:image/svg+xml;base64,${base64}")`
    }}
  />
);

Option 2: Use React SVG Components

import ChevronLeftSvg from './icons/chevron-left-md.svg?react';

export const ChevronLeftMd = (props: IconProps) => (
  <span className={iconClasses}>
    <ChevronLeftSvg />
  </span>
);

Option 3: Vite Plugin Configuration

// vite.config.ts
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    svgr({ svgrOptions: { icon: true } })
  ]
});

Files to Investigate

• packages/ui/src/components/Icon/Icon.tsx
• packages/ui/src/icons/ChevronLeftMd.tsx
• packages/ui/src/icons/ChevronRightMd.tsx
• packages/ui/scripts/generate-icon-components.cjs
• packages/ui/vite.config.ts
• packages/ui/dist/components/Carousel/Carousel.css

Testing Checklist

• Icons visible in Storybook
• Icons visible in consuming Vite apps
• Icons visible in light mode
• Icons visible in dark mode
• No broken asset URLs in DevTools
• Build size increase < 10KB
• Icons maintain currentColor inheritance

Related Issues

This affects ALL icon components, not just Carousel navigation.

Priority

🔴 Critical - Breaks core UI functionality

Labels

bug, critical, icons, carousel, build-system

[JakeLin]

This issue is now resolved:

• Distribution: SVG icons are now included in npm packages
• Resolution: Icons use import.meta.url to resolve relative to the installed module location
• Compatibility: Works in all environments (npm packages, monorepos, different bundlers) with graceful fallback
• The Icon component already uses getIconUrl() correctly, so no API changes were needed - just proper asset distribution and URL resolution.