import { IconSystem, ChartIcon } from '$lib/components/icons';

// Basic usage
<IconSystem icon={ChartIcon} />

// With size and color
<IconSystem 
  icon={ChartIcon} 
  size="lg" 
  color="primary" 
/>

// Interactive icon
<IconSystem 
  icon={ChartIcon} 
  size="xl" 
  interactive 
  aria-label="View chart" 
  on:click={handleClick}
/>

Live Examples

Small chart icon

Medium primary arrow

Large success certificate

Interactive brain icon

Icon Design System

Icon Sizes

12px

16px

20px

24px

32px

2xl

40px

3xl

48px

Icon Variants

default

filled

outlined

duotone

Icon Colors

current

primary

secondary

muted

accent

destructive

success

warning

gray

white

Interactive States

Default

Hoverable

Interactive

Disabled

Usage Examples

Code Examples:

<IconSystem icon={ChartIcon} size="lg" color="primary" />

<IconSystem icon={ArrowIcon} variant="outlined" interactive />

<IconSystem icon={BrainIcon} size="xl" color="success" aria-label="AI Feature" />

Design Guidelines

✓ Do

• Use consistent sizes across similar UI elements
• Provide aria-labels for interactive icons
• Use the color system for theming
• Keep stroke width consistent within variants

✗ Don't

• Mix different icon styles in the same context
• Use custom sizes outside the system
• Forget accessibility attributes
• Override color with arbitrary values

Migration Guide

From Old Icon Component

❌ Before

<Icon icon={ChartIcon} class="w-6 h-6 text-blue-500" />

✅ After

<IconSystem icon={ChartIcon} size="lg" color="primary" />

Benefits of Migration

Consistency

Standardized sizes and colors across your app

Accessibility

Built-in ARIA attributes and proper contrast

Maintainability

Easy to update and scale your icon system

Design Tokens

Sizes

xs 12px

sm 16px

md 20px

lg 24px

xl 32px

2xl 40px

3xl 48px

Variants

default

Standard icon appearance

filled

Solid fill with current color