Icon Component

The Icon component provides a consistent way to display SVG icons throughout your application. With built-in size variants and hover effects, you can easily integrate icons that match your design system.

Key Features

• Multiple Sizes: Pre-defined size variants from small to extra-large

• Hover Effects: Optional hover states for interactive icons

• Flexible Integration: Works with any SVG content

• Responsive Design: Automatic scaling and fitting options

Basic Usage

The Icon component accepts SVG content through the svg prop:

1
---
2
import importedSvg from '@/assets/icons/example.svg?raw';
3
---
4

5
<Icon svg={importedSvg} />

Size Variants

The Icon component comes with predefined size variants:

1
<Icon svg={mySvg} size="sm" />     <!-- 16x16 pixels -->
2
<Icon svg={mySvg} size="md" />     <!-- 20x20 pixels -->
3
<Icon svg={mySvg} size="default" /> <!-- 24x24 pixels -->
4
<Icon svg={mySvg} size="lg" />     <!-- 32x32 pixels -->
5
<Icon svg={mySvg} size="xl" />     <!-- 48x48 pixels -->
6
<Icon svg={mySvg} size="fit" />    <!-- Fits container -->

Interactive Variants

Add hover effects to make icons interactive:

1
<Icon svg={mySvg} variant="default" /> <!-- Static icon -->
2
<Icon svg={mySvg} variant="hover" />   <!-- Hover effect -->

Component API

Best Practices

1. SVG Optimization

   • Optimize SVGs before use
   • Remove unnecessary attributes
   • Use consistent viewBox sizes
   • Minimize path complexity

2. Accessibility

   • Include aria-label when icon conveys meaning
   • Use role=“img” for decorative icons
   • Ensure sufficient color contrast
   • Consider icon recognition