first commit
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
# SbIcon
|
||||
|
||||
Renders SVG icons from the Sufi Icons library with support for sizing, coloring, and accessibility features. Can also render custom SVG content.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Name | string? | null | Icon name from the Sufi Icons library (e.g., "home" or "si-home") |
|
||||
| Size | SbSize | Md | Icon size (Sm, Md, Lg, Xl) |
|
||||
| Color | SbColor? | null | Icon color. When null, inherits from parent via currentColor |
|
||||
| AriaLabel | string? | null | Accessible label. When set, icon becomes semantic (role="img") |
|
||||
| Mirror | bool | false | Mirrors icon in RTL layouts (for directional icons) |
|
||||
| Class | string? | null | Additional CSS classes |
|
||||
| Style | string? | null | Inline styles |
|
||||
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
|
||||
|
||||
## Templates / Slots
|
||||
|
||||
| Slot | Type | Description |
|
||||
|------|------|-------------|
|
||||
| CustomContent | RenderFragment? | Custom SVG or content (takes precedence over Name) |
|
||||
|
||||
### Template Usage
|
||||
|
||||
```razor
|
||||
<SbIcon>
|
||||
<CustomContent>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<!-- Custom SVG paths -->
|
||||
</svg>
|
||||
</CustomContent>
|
||||
</SbIcon>
|
||||
```
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-icon` - Base class
|
||||
- `sb-icon--sm` - Small size
|
||||
- `sb-icon--md` - Medium size
|
||||
- `sb-icon--lg` - Large size
|
||||
- `sb-icon--xl` - Extra large size
|
||||
- `sb-icon--primary` - Primary color
|
||||
- `sb-icon--secondary` - Secondary color
|
||||
- `sb-icon--success` - Success color
|
||||
- `sb-icon--warning` - Warning color
|
||||
- `sb-icon--danger` - Danger color
|
||||
- `sb-icon--mirror` - Mirrored for RTL
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Decorative icons** (no `AriaLabel`): Uses `aria-hidden="true"` to hide from screen readers
|
||||
- **Semantic icons** (with `AriaLabel`): Uses `role="img"` and `aria-label` for screen readers
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Icons
|
||||
|
||||
```razor
|
||||
<SbIcon Name="home" />
|
||||
<SbIcon Name="user" />
|
||||
<SbIcon Name="settings" />
|
||||
<SbIcon Name="search" />
|
||||
<SbIcon Name="menu" />
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
```razor
|
||||
<SbIcon Name="star" Size="SbSize.Sm" />
|
||||
<SbIcon Name="star" Size="SbSize.Md" />
|
||||
<SbIcon Name="star" Size="SbSize.Lg" />
|
||||
<SbIcon Name="star" Size="SbSize.Xl" />
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
||||
```razor
|
||||
<SbIcon Name="circle" Color="SbColor.Primary" />
|
||||
<SbIcon Name="circle" Color="SbColor.Secondary" />
|
||||
<SbIcon Name="circle" Color="SbColor.Success" />
|
||||
<SbIcon Name="circle" Color="SbColor.Warning" />
|
||||
<SbIcon Name="circle" Color="SbColor.Danger" />
|
||||
```
|
||||
|
||||
### Inheriting Color
|
||||
|
||||
```razor
|
||||
@* Icon inherits the parent's text color *@
|
||||
<span style="color: purple;">
|
||||
<SbIcon Name="heart" /> Favorite
|
||||
</span>
|
||||
|
||||
<SbButton Color="SbColor.Primary">
|
||||
<SbIcon Name="save" /> Save
|
||||
</SbButton>
|
||||
```
|
||||
|
||||
### Accessible Icons
|
||||
|
||||
```razor
|
||||
@* Decorative icon (hidden from screen readers) *@
|
||||
<SbButton>
|
||||
<SbIcon Name="save" /> Save Document
|
||||
</SbButton>
|
||||
|
||||
@* Semantic icon (announced by screen readers) *@
|
||||
<SbIcon Name="warning" AriaLabel="Warning" />
|
||||
|
||||
@* Icon-only button with accessible label *@
|
||||
<SbIconButton Icon="close" AriaLabel="Close dialog" />
|
||||
```
|
||||
|
||||
### RTL Mirror
|
||||
|
||||
```razor
|
||||
@* Arrow icons that should flip in RTL layouts *@
|
||||
<SbIcon Name="arrow-right" Mirror="true" />
|
||||
<SbIcon Name="chevron-left" Mirror="true" />
|
||||
```
|
||||
|
||||
### Custom SVG Content
|
||||
|
||||
```razor
|
||||
<SbIcon Size="SbSize.Lg">
|
||||
<CustomContent>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L2 7v10l10 5 10-5V7L12 2z"/>
|
||||
</svg>
|
||||
</CustomContent>
|
||||
</SbIcon>
|
||||
```
|
||||
|
||||
### In Buttons
|
||||
|
||||
```razor
|
||||
<SbButton>
|
||||
<SbIcon Name="plus" Size="SbSize.Sm" /> Add Item
|
||||
</SbButton>
|
||||
|
||||
<SbButton Variant="SbButtonVariant.Outlined">
|
||||
<SbIcon Name="download" Size="SbSize.Sm" /> Download
|
||||
</SbButton>
|
||||
|
||||
<SbIconButton Icon="edit" />
|
||||
```
|
||||
|
||||
### In Navigation
|
||||
|
||||
```razor
|
||||
<SbNavMenu>
|
||||
<SbNavItem Href="/dashboard">
|
||||
<IconTemplate>
|
||||
<SbIcon Name="home" />
|
||||
</IconTemplate>
|
||||
Dashboard
|
||||
</SbNavItem>
|
||||
<SbNavItem Href="/users">
|
||||
<IconTemplate>
|
||||
<SbIcon Name="users" />
|
||||
</IconTemplate>
|
||||
Users
|
||||
</SbNavItem>
|
||||
</SbNavMenu>
|
||||
```
|
||||
|
||||
### Status Indicators
|
||||
|
||||
```razor
|
||||
<span>
|
||||
<SbIcon Name="check-circle" Color="SbColor.Success" /> Active
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<SbIcon Name="clock" Color="SbColor.Warning" /> Pending
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<SbIcon Name="x-circle" Color="SbColor.Danger" /> Failed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Loading State
|
||||
|
||||
```razor
|
||||
<SbIcon Name="loader" Class="spin" />
|
||||
|
||||
<style>
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Icon List
|
||||
|
||||
```razor
|
||||
<SbStack Direction="SbDirection.Row" Gap="SbSpacing.Sm">
|
||||
<SbIcon Name="facebook" Size="SbSize.Lg" />
|
||||
<SbIcon Name="twitter" Size="SbSize.Lg" />
|
||||
<SbIcon Name="linkedin" Size="SbSize.Lg" />
|
||||
<SbIcon Name="github" Size="SbSize.Lg" />
|
||||
</SbStack>
|
||||
```
|
||||
Reference in New Issue
Block a user