NeoUI.Icons.Lucide 3.0.0

NeoUI.Icons

A comprehensive Lucide icon library for Blazor applications, providing 1,600+ beautiful, consistent SVG icons.

Features

• 1,640+ Icons: Complete Lucide icon set
• React-Style API: Familiar component-based API for React developers
• Fully Accessible: ARIA-compliant with customizable labels
• Tree-Shakeable: Blazor assembly trimming removes unused icons at publish time
• Type-Safe: Full XML documentation and IntelliSense support
• Themeable: Icons inherit color from parent by default, supports CSS variables
• Lightweight: Optimized SVG rendering with minimal overhead

Installation

dotnet add package NeoUI.Icons.Lucide

Basic Usage

Import the Namespace

Add to _Imports.razor:

@using NeoUI.Icons.Lucide

Render an Icon

<LucideIcon Name="camera" />

Customize Size and Color

<LucideIcon Name="heart" Size="32" Color="red" />

Use with CSS Variables (Theming)

<LucideIcon Name="sun" Color="var(--primary)" />

Icon-Only Button (with Accessibility)

<button aria-label="Take Photo">
    <LucideIcon Name="camera" />
</button>

Integration with NeoUI Button Component

<Button>
    <Icon>
        <LucideIcon Name="camera" Size="20" />
    </Icon>
    Take Photo
</Button>

Component API

Parameters

Examples

Basic Icon:

<LucideIcon Name="home" />

Large Icon with Custom Color:

<LucideIcon Name="star" Size="48" Color="#FFD700" />

Icon with Custom Stroke Width:

<LucideIcon Name="circle" StrokeWidth="1.5" />

Icon with Custom CSS Classes:

<LucideIcon Name="circle-alert" Class="text-destructive hover:text-destructive/80" />

Accessible Icon-Only Button:

<button>
    <LucideIcon Name="trash" AriaLabel="Delete item" />
</button>

Icon with Data Attributes:

<LucideIcon Name="settings" data-testid="settings-icon" />

Icon Names

All 1,640+ Lucide icons are available. Icon names use kebab-case and match the official Lucide icon names:

• camera
• home
• user
• settings
• heart
• star
• check
• x
• chevron-down
• chevron-up
• alert-circle
• info
• ... and 1,600+ more

Browse all icons: lucide.dev/icons

Styling

Default Behavior

Icons inherit color from their parent element by default:

<div style="color: blue;">
    <LucideIcon Name="home" /> 
</div>

Explicit Color

Override the inherited color:

<LucideIcon Name="home" Color="red" />

CSS Variables (Theming)

Perfect for theme systems:

<LucideIcon Name="sun" Color="var(--primary)" />
<LucideIcon Name="moon" Color="var(--foreground)" />

Tailwind CSS

Use Tailwind utility classes:

<LucideIcon Name="check" Class="text-green-500 dark:text-green-400" />

Accessibility

Decorative Icons (Next to Text)

Icons next to text are decorative and don't need labels:

<button>
    <LucideIcon Name="camera" />
    <span>Take Photo</span>
</button>

Semantic Icons (Icon-Only)

Icon-only elements require AriaLabel:

<button>
    <LucideIcon Name="camera" AriaLabel="Take Photo" />
</button>

Performance

• Bundle Size: ~300 KB for complete icon set (before compression)
• Brotli Compression: Reduces size by ~70% in production
• Assembly Trimming: Unused icons automatically removed at publish time
• Static Dictionary: O(1) icon lookup with minimal memory overhead

Browser Support

Works in all modern browsers that support:

• Blazor Server / WebAssembly / Hybrid
• SVG rendering
• CSS currentColor

License

This package is MIT licensed.

Lucide icons are ISC licensed by Lucide Contributors.

Links

• Lucide Icons: lucide.dev
• NeoUI: GitHub Repository
• Issues: Report a Bug

Contributing

Contributions are welcome! Please open an issue or pull request on GitHub.

Made with ❤️ by the NeoUI team