Icon

The Icon component provides a unified interface for rendering SVG icons with support for dynamic loading, size control, color theming, and comprehensive error handling. It loads SVG files on-demand and offers fine-grained control over appearance.

API Reference

Props

Icon Libraries

The project includes four icon categories:

• UI Icons (/svg/ui_icons/): Interface and action icons
• Dev Logos (/svg/dev_logos/): Technology and framework logos
• Arrows (/svg/arrows/): Directional and navigation arrows
• Spinners (/svg/spinners/): Loading and progress indicators

Usage Examples

Basic Icon

<Icon src="/svg/ui_icons/home.svg" />

Sized Icon

<Icon src="/svg/ui_icons/search.svg" size={24} />
<Icon src="/svg/ui_icons/filter.svg" size="2rem" />

Colored Icon

<Icon 
  src="/svg/ui_icons/semantic/check-circle.svg" 
  color="var(--color-semantic-success)" 
/>

Button with Icon

<Button variant="primary">
  <Icon src="/svg/ui_icons/save.svg" size={16} />
  Save Changes
</Button>

Icon States

<!-- Loading state -->
<Icon src="/api/slow-icon.svg" />

<!-- Error state -->
<Icon src="/invalid/path.svg" />

<!-- Decorative icon -->
<Icon 
  src="/svg/ui_icons/star.svg" 
  ariaHidden={true}
/>

Custom Stroke Width

<Icon 
  src="/svg/arrows/arrow-right.svg" 
  strokeWidth={2} 
  size={32}
/>

Icon Categories

UI Icons

Common interface icons for actions, navigation, and status indicators:

• Files: document, folder, code-file
• Actions: edit, trash, refresh, save
• Navigation: menu, close, search, filter
• Status: check-circle, info-circle, warning-triangle

Development Logos

Technology and framework logos for documentation and portfolios:

• Languages: javascript, typescript, python, rust
• Frameworks: svelte, react, vue, angular
• Tools: vscode, git, docker, kubernetes

Arrows

Directional indicators for navigation and UI interactions:

• Basic: arrow-up, arrow-down, arrow-left, arrow-right
• Diagonal: arrow-up-right, arrow-down-left
• Special: chevron-down, caret-right, return-arrow

Spinners

Loading indicators for async operations:

• Types: dots, rings, bars, pulse
• All spinners automatically animate when used

Design Tokens

The Icon component uses the following design tokens:

• Colors: Inherits from currentColor by default
• Transitions: --transition-base for smooth state changes
• Semantic colors: --color-semantic-error for error states
• Animation: Built-in pulse animation for loading states

Loading & Error States

Loading State

When an icon is loading, a three-dots spinner is displayed automatically:

• Same size as the requested icon
• Inherits the specified color
• Smooth transition when icon loads

Error State

If an icon fails to load, an X mark is displayed:

• Uses --color-semantic-error color
• Maintains the requested size
• Console error for debugging

Empty State

Before an icon loads or if no src is provided:

• Displays a placeholder with 10% opacity
• Maintains layout stability
• Prevents content shift

Performance Considerations

• Icons are loaded on-demand via fetch
• SVG content is inlined for maximum control
• Cached in browser for repeated use
• Automatic detection of stroke vs fill-based icons
• Efficient re-rendering on prop changes

Accessibility

• Semantic role="img" by default
• aria-label support via alt prop
• aria-hidden for decorative icons
• Proper focus handling in interactive contexts
• Screen reader friendly error states

Best Practices

1. Use semantic paths: Organize icons by purpose (/svg/ui_icons/semantic/)
2. Size appropriately: 16px for inline, 20px for buttons, 24px+ for headers
3. Color inheritance: Use currentColor for theme compatibility
4. Loading states: Icons automatically show loading state during fetch
5. Accessibility: Always provide alt text for meaningful icons
6. Performance: Icons are cached by the browser after first load