Components

Icon

Every Heroicon, by name, as an inline SVG: outline, solid, mini and micro, sized and coloured with a class. Most of the kit takes an icon as a step and places it itself.

Drawn and behaving as Flux UI's icon does, measured against its live docs.

Icon

Ui.IconName lists them all.

IconExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class IconExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-4")[
            Ui.Icon.Name(Ui.IconName.Bolt),
            Ui.Icon.Name(Ui.IconName.Bell),
            Ui.Icon.Name(Ui.IconName.Calendar),
            Ui.Icon.Name(Ui.IconName.ChartBar),
            Ui.Icon.Name(Ui.IconName.Cog6Tooth),
            Ui.Icon.Name(Ui.IconName.Envelope)
        ];
}

Live result

Variants

Outline and solid are 24px, mini 20px and micro 16px, each drawn for its size.

IconVariantsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class IconVariantsExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-4")[
            Ui.Icon.Name(Ui.IconName.Bolt),
            Ui.Icon.Name(Ui.IconName.Bolt).Solid,
            Ui.Icon.Name(Ui.IconName.Bolt).Mini,
            Ui.Icon.Name(Ui.IconName.Bolt).Micro
        ];
}

Live result

Sizes

A size-* class overrides the drawing's own size.

IconSizesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class IconSizesExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-4")[
            Ui.Icon.Name(Ui.IconName.Bolt).Class("size-12"),
            Ui.Icon.Name(Ui.IconName.Bolt).Class("size-8"),
            Ui.Icon.Name(Ui.IconName.Bolt).Class("size-6"),
            Ui.Icon.Name(Ui.IconName.Bolt).Class("size-4")
        ];
}

Live result

Colors

It draws in the text colour, so a text-* class colours it.

IconColorsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class IconColorsExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-4")[
            Ui.Icon.Name(Ui.IconName.Bolt).Class("text-orange-500"),
            Ui.Icon.Name(Ui.IconName.Bolt).Class("text-emerald-500"),
            Ui.Icon.Name(Ui.IconName.Bolt).Class("text-sky-500"),
            Ui.Icon.Name(Ui.IconName.Bolt).Class("text-zinc-400 dark:text-zinc-500")
        ];
}

Live result

In other components

Most of the kit takes an icon as a step, and sizes and spaces it itself.

IconInComponentsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class IconInComponentsExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-4")[
            Ui.Button.Icon(Ui.IconName.ArrowDownTray)["Export"],
            Ui.Badge.Icon(Ui.IconName.Bolt)["Fast"],
            Ui.Input.Of<string>().Icon(Ui.IconName.MagnifyingGlass).Placeholder("Search...")
        ];
}

Live result

Fast

Reference

`Ui.Icon`

flux:icon.*

One of the Heroicons, as an inline SVG.

Step	Takes	What it does
`.Name(…)`	`Ui.IconName` — one of 317 names	Which icon to draw. Required, and taken first.
`.Variant(…)`	`Ui.IconVariant` Outline Solid Mini Micro Each is a step of its own too, unless an HTML tag has its name.	Which drawing of it, and so how large. Outline when unset.