71 lines
1.7 KiB
Markdown
71 lines
1.7 KiB
Markdown
# 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.
|