C
C#•3w ago
AnnaSasDev

Extending a razor component so I can make developer experience a bit easier

Hey there, this might be a qustion that has no answer but Im making a small library so I can easily use Lucide icons in my blazor web app. Ive made a small component that is basically a wrapper around the svg data: LucideIcon.razor: 
@inherits ComponentBase
<svg xmlns="http://www.w3.org/2000/svg"
     width="@Width"
     height="@Height"
     viewBox="0 0 24 24"
     fill="@Fill"
     stroke="@Stroke"
     stroke-width="@StrokeWidth"
     stroke-linecap="@StrokeLineCap"
     stroke-linejoin="@StrokeLineJoin"
     @attributes="AdditionalAttributes">
    @SvgContent
</svg>

@code {
    [Parameter] public int Width { get; set; } = 24;
    [Parameter] public int Height { get; set; } = 24;
    [Parameter] public string Fill { get; set; } = "none";
    [Parameter] public string Stroke { get; set; } = "currentColor";
    [Parameter] public int StrokeWidth { get; set; } = 2;
    [Parameter] public string StrokeLineCap { get; set; } = "round";
    [Parameter] public string StrokeLineJoin { get; set; } = "round";

    public string NameCache = string.Empty;
    [Parameter] public string Name {
        get => NameCache;
        set {
            NameCache = value;
            SvgContent = LucideService.GetIconContent(NameCache);
        }
    }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AdditionalAttributes { get; set; } = null!;

    [Parameter]
    public MarkupString SvgContent { get; set; }
}
@inherits ComponentBase
<svg xmlns="http://www.w3.org/2000/svg"
     width="@Width"
     height="@Height"
     viewBox="0 0 24 24"
     fill="@Fill"
     stroke="@Stroke"
     stroke-width="@StrokeWidth"
     stroke-linecap="@StrokeLineCap"
     stroke-linejoin="@StrokeLineJoin"
     @attributes="AdditionalAttributes">
    @SvgContent
</svg>

@code {
    [Parameter] public int Width { get; set; } = 24;
    [Parameter] public int Height { get; set; } = 24;
    [Parameter] public string Fill { get; set; } = "none";
    [Parameter] public string Stroke { get; set; } = "currentColor";
    [Parameter] public int StrokeWidth { get; set; } = 2;
    [Parameter] public string StrokeLineCap { get; set; } = "round";
    [Parameter] public string StrokeLineJoin { get; set; } = "round";

    public string NameCache = string.Empty;
    [Parameter] public string Name {
        get => NameCache;
        set {
            NameCache = value;
            SvgContent = LucideService.GetIconContent(NameCache);
        }
    }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AdditionalAttributes { get; set; } = null!;

    [Parameter]
    public MarkupString SvgContent { get; set; }
}
which can then be used like 
<LucideIcon Name="signature" />
<LucideIcon Name="signature" />
But I wanted to make something so I could immediatly have 
<LucideIcon.Signature/>
<LucideIcon.Signature/>
3 Replies
AnnaSasDev
AnnaSasDevOP•3w ago
But the only way Ive been able to make this work is by doing the following (work in progress testing): 
public partial class LucideIcon {
    public static RenderFragment Render(string iconSvgContent, Dictionary<string, object>? attributes = null) 
        => builder => {
            builder.OpenComponent<LucideIcon>(0); // Parent LucideIcon component
            builder.AddAttribute(1, "SvgContent", new MarkupString(iconSvgContent));
            builder.AddMultipleAttributes(2, attributes ?? new Dictionary<string, object>()); // Dynamically apply attributes
            builder.CloseComponent();
        };

    // Predefined Signature RenderFragment with customizable attributes
    public static RenderFragment Signature(string @class = "") =>
        Render(Data.Signature._flatSvgContent, new Dictionary<string, object>() {
            ["class"] = @class,
        });
}
public partial class LucideIcon {
    public static RenderFragment Render(string iconSvgContent, Dictionary<string, object>? attributes = null) 
        => builder => {
            builder.OpenComponent<LucideIcon>(0); // Parent LucideIcon component
            builder.AddAttribute(1, "SvgContent", new MarkupString(iconSvgContent));
            builder.AddMultipleAttributes(2, attributes ?? new Dictionary<string, object>()); // Dynamically apply attributes
            builder.CloseComponent();
        };

    // Predefined Signature RenderFragment with customizable attributes
    public static RenderFragment Signature(string @class = "") =>
        Render(Data.Signature._flatSvgContent, new Dictionary<string, object>() {
            ["class"] = @class,
        });
}
which then results in the following workaround. 
@LucideIcon.Signature(@class:"validation-message")
@LucideIcon.Signature(@class:"validation-message")
Because razor files are already brought dozn to C# through a roslyn generator, Im unsure if I could build something like I envisioned with the <LucideIcon.Signature/> idea
333fred
333fred•3w ago
I don't know of any way you could make that work
AnnaSasDev
AnnaSasDevOP•2w ago
Have eventually "figured out" a solution that I wanted, though Im still debating the fact if this is the best approach in the long run. Made a small manual cli tool, instead of a Roslyn Incremental Generator, that parses the svg files from lucide-static into individual razor files, which follow the naming convention of Li{lucideName.ToPascalCase()} (pseudo). Ive also made the option to resolve the icon the old way, through a simple inject ILucideService so you can now have two options. This service works by using an underlying dictionary with lazy loaded values, which is populated by a Roslyn Incremental Generator meaning hat I can use an Icon in two ways: 
<LucideIcon name="signature">
or
<LiSignature/>
<LucideIcon name="signature">
or
<LiSignature/>
For anyone wondering, the full package's code is here: (constructive feedback is always appreciated): https://github.com/InfiniLore/lucide.blazor
GitHub
GitHub - InfiniLore/lucide.blazor: Use Lucide Icons in your blazor ...
Use Lucide Icons in your blazor application. Contribute to InfiniLore/lucide.blazor development by creating an account on GitHub.

Did you find this page helpful?