eQuantic.UI

eQuantic.UI Documentation

Visuals

Icon Ecosystem

Access over 11 market-leading icon packs with a unified system, optimized for performance and tree-shaking.

Provider Activation

Activate only the necessary providers in your Program.cs. The system uses lazy loading to ensure the final bundle stays light.

builder.Services.AddUI(options =>
{
    // Enable icon packs (lazy-loaded on frontend)
    options.UseLucideIcons()
           .UseTablerIcons()
           .UseHeroicons()
           .UseFontAwesome()
           .UseAntDesignIcons()
           .UseMaterialIcons()
           .UseBootstrapIcons()
           .UseFeatherIcons()
           .UseIonIcons()
           .UseRemixIcons()
           .UseWeatherIcons();
});

Usage Patterns

Unified Icon vs Specialized

The Icon component allows switching packs just by changing the prefix, while specialized components offer pack-specific properties (like fill styles in FontAwesome).

// Generic Approach (Unified Icon)
new Icon("lucide:activity", size: 24, color: "text-blue-500");

// Specialized Components (Type-safe)
new LucideIcon("activity") { Size = 24 };
new TablerIcon("user") { Color = "text-red-500" };
new FontAwesomeIcon("rocket") { Style = IconStyle.Solid };

Optimization

Automatic SVG inlining during SSR.

Styling

Full integration with Tailwind CSS classes.

Custom Providers

You can extend the ecosystem by implementing the IIconProvider interface. Ideal for brand icons or internal packages.

public class MyCustomIconProvider : IIconProvider
{
    public string Name => "my-icons";
    public string Resolve(string name) => $"<svg>...</svg>";
}

// Registration
options.WithIconProvider<MyCustomIconProvider>();

Performance Tip

Avoid mixing many different icon packages on the same page to keep the initial load time minimal.