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:

new Icon("lucide:search") { ClassName = "w-4 h-4" }
new Icon("heroicons:adjustments-vertical") { ClassName = "w-5 h-5" }

📦 Supported Icon Sets

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

🛠️ Specialized Components

Each icon set also provides specialized components for direct usage without the prefix:

new LucideIcon("search")
new Heroicon("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 with AddIconProvider.