Initial commit

docs/style-guide/icons.md

@@ -0,0 +1,70 @@
+# Icons Style Guide
+
+## Overview
+
+The VUER UI Kit utilizes Lucide icons as its foundational icon system, providing a "comprehensive collection of beautifully crafted, customizable icons that maintain consistency" across applications.
+
+## Icon Sizing Guidelines
+
+| Size | Use Case | Description |
+|------|----------|-------------|
+| 16px | Dense interfaces | Compact layout icons |
+| 20px | Default UI | Standard element sizing |
+| 24px | Buttons/Actions | Primary action buttons |
+| 32px | Emphasis | Large touch target icons |
+
+## Color Application
+
+| Type | Usage | Application |
+|------|-------|-------------|
+| Current Color | Default | Inherits parent text color |
+| Gray Scale | Secondary | Disabled states and subtle elements |
+| Accent Colors | Emphasis | Actions and highlights (use sparingly) |
+
+## Implementation Guidelines
+
+**Best Practices:**
+- Maintain consistent sizing within interface sections
+- Scale proportionally when resizing
+- Ensure minimum 44px touch targets for mobile devices
+
+### Stroke Width Options
+
+| Width | Usage |
+|-------|-------|
+| 1.5 | Default |
+| 1 | Light |
+| 2 | Bold |
+
+## Code Examples
+
+**Standard Usage:**
+```javascript
+import { ChevronUp, Plus, Search } from 'lucide-react';
+
+<ChevronUp size={24} strokeWidth={1.5} />
+```
+
+**Custom Styling:**
+```javascript
+<Plus
+  size={20}
+  strokeWidth={2}
+  className="text-blue-500 hover:text-blue-700"
+/>
+```
+
+## Accessibility
+
+Always provide descriptive labels for icon-only buttons:
+```javascript
+<button aria-label="Delete item">
+  <Trash size={20} />
+</button>
+```
+
+Hide purely decorative icons from screen readers using `aria-hidden="true"`.
+
+## Responsive Implementation
+
+Adjust sizes based on viewport dimensions for optimal display across devices.