Namespace Dmnk.Icons.Blazor

NuGet Version

Allow using icons defined using Dmnk.Icons.Core in Blazor applications by generating MarkupStrings. See BlazorIconExtensions.

Color and size set on an Icon instance (via Icon.WithColor() / Icon.Size) are forwarded to the rendered markup. For SVG icons the viewBox is taken from SvgIconDefinition.ViewBox (the coordinate space of the path data), while width/height reflect the requested render size.

Example

public class MyIconDefinition : SvgIconDefinition("my-icon") 
{
    // ViewBox must match the coordinate space of your SVG path data.
    public override (int Width, int Height) ViewBox => (24, 24);
    public override string Svg => """<path d="some svg path here"/>""";
}

public class MyCustomBlazorIcon : CustomIconDefinition("custom-icon") 
{
    public override MarkupString ToMarkup(System.Drawing.Color? color = null, int? size = null) => 
        Some.Other.Blazor.Icon.Library.Icon1.AsMarkupString();
}

public static class MyIcons 
{
    // since these are getters, the compiler can strip out unused icons
    public static IconDefinition MyIcon => new MyIconDefinition();
    public static IconDefinition MyCustomBlazorIcon => new MyCustomBlazorIcon();
}

Program.cs:

BlazorIconExtensions.DefaultColor = "black"; // or whatever css color value you want

@using Dmnk.Icons.Blazor

<div>@MyIcons.MyIcon.Size20.ToMarkupString()</div>

@* render at 48px in red *@
<div>@MyIcons.MyIcon.Size48.WithColor(System.Drawing.Color.Red).ToMarkupString()</div>

<div>@MyIcons.MyCustomBlazorIcon.Size48.ToMarkupString()</div>

Classes

BlazorIconExtensions: Helpers to convert Icons to Blazor MarkupStrings for rendering in Blazor components.

CustomIconDefinition: Allows defining a custom blazor-only icon directly as a markup string. This is useful especially for using Icon libraries that were designed for Blazor and don't have a direct SVG representation, but can be rendered as a Blazor component or markup string.

Table of Contents

Namespace Dmnk.Icons.Blazor

Example

Classes