sufi-blazor/docs/components/common/SbIcon.md

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

<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

<SbIcon Name="home" />
<SbIcon Name="user" />
<SbIcon Name="settings" />
<SbIcon Name="search" />
<SbIcon Name="menu" />

Sizes

<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

<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

@* 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

@* 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

@* Arrow icons that should flip in RTL layouts *@
<SbIcon Name="arrow-right" Mirror="true" />
<SbIcon Name="chevron-left" Mirror="true" />

Custom SVG Content

<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

<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

<SbNavMenu>
    <SbNavItem Href="/dashboard">
        <IconTemplate>
            <SbIcon Name="home" />
        </IconTemplate>
        Dashboard
    </SbNavItem>
    <SbNavItem Href="/users">
        <IconTemplate>
            <SbIcon Name="users" />
        </IconTemplate>
        Users
    </SbNavItem>
</SbNavMenu>

Status Indicators

<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

<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

<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>