Icons

Icons Ecosystem

eQuantic.UI provides a comprehensive and extensible icon ecosystem. It supports multiple popular icon sets out of the box, all integrated through a unified component model.

🚀 Quick Start

To use icons in your project, install the desired icon set package and the core components package.

dotnet add package eQuantic.UI.Components
dotnet add package eQuantic.UI.Lucide

Registration

Register the icon providers in your Program.cs:

// Register icon sets as services
builder.Services.AddLucideIcons();
builder.Services.AddTablerIconsIcons();
// ... other icon sets

builder.Services.AddUI(options =>
{
    options.ScanAssembly(typeof(Program).Assembly);
});

Usage

Use the unified Icon component to render icons from any registered set. The component iterates through all registered IIconProvider services and uses the first one that resolves the name:

new Icon { Name = "search", ClassName = "w-4 h-4" }
new Icon { Name = "adjustments-vertical", Size = 20 }

Additional properties: Size (default: 24), StrokeWidth (default: 2), Color (default: "currentColor").

Note: When multiple icon sets are registered and share icon names, the first registered provider that resolves the name wins. Use specialized components (below) for explicit targeting.

📦 Supported Icon Sets

Package	Description
eQuantic.UI.Lucide	Beautiful & consistent icons (default set).
eQuantic.UI.Heroicons	Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.
eQuantic.UI.RadixIcons	A crisp set of 15×15 icons designed by the Radix UI team.
eQuantic.UI.TablerIcons	Over 4200 pixel-perfect icons for web design.
eQuantic.UI.FontAwesome6.Solid	The world's most popular icon set (Solid variant).
eQuantic.UI.FontAwesome6.Regular	Font Awesome 6 Regular icons.
eQuantic.UI.FontAwesome6.Brands	Font Awesome 6 Brand icons.

🛠️ Specialized Components

Each icon set provides specialized components for direct, unambiguous usage:

new LucideIcon("search")
new HeroiconsIcon("adjustments-vertical")

🏗️ Technical Architecture

The icon system is built on a provider-based architecture:

1. IIconProvider: Interface in eQuantic.UI.Core for resolving SVGs.
2. Icon Component: Unified component in eQuantic.UI.Components that uses registered providers.
3. Asset Management: Icons are rendered as lightweight SVGs directly in the DOM, maintaining full CSS styling compatibility (colors, sizes, animations).

🔄 Custom Icon Sets

You can implement your own icon provider by implementing IIconProvider and registering it in DI:

public class MyIconProvider : IIconProvider
{
    public bool CanResolve(string name) => /* check if icon exists */;

    public IComponent? CreateIcon(string name, int size = 24, double strokeWidth = 2,
        string color = "currentColor", string? className = null)
    {
        // Return SVG component
    }
}

// Register in Program.cs
builder.Services.AddSingleton<IIconProvider, MyIconProvider>();