Blazor Avatar

This Blazor library provides components that render avatar. Currently this library only supports initial avatar.

This library has been tested only with Blazor WebAssembly.

Install

Install package from Nuget.

dotnet add package Blazor.Avatar --version <latest-version>

Before we can start using the avatar components, we must do:

1. Register Blazor.Avatar dependencies by calling AddAvatarComponents() in Program.cs.
2. Import DotnetCallbackJsModule in Program.cs via RegisterAttachReviverAsync() extension method. See more here.

using Blazor.Core; using Blazor.Avatar; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>("#app"); builder.RootComponents.Add<HeadOutlet>("head::after"); builder.Services .AddAvatarComponents() // Register dependencies .AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); var webHost = builder.Build(); // Must load this module during start up await webHost.Services.RegisterAttachReviverAsync(); await webHost.RunAsync();

Usage

You can clone this repo and run the samples/Blazor.Avatar.Samples.WebAssembly project to see how the avatars are generated.

Alternatively you can view the sample project hosted on Github page.

Initial Avatar

Use the InitialAvatar component in your Razor file.

@page "/" @using Blazor.Avatar.Components.InitialAvatarComponent <p>Render initial avatar with random color.</p> <InitialAvatar FirstName="Aaron" LastName="Doe" /> <p>Render initial avatar with specify color and size.</p> <InitialAvatar FirstName="Jane" LastName="Smith" FillColor="green" Size=100 /> <p> Render initial avatar with specify style. Note that specifying <b>Style="border-radius: 50%; width: 80px; height: 60px"</b> will override the <b>Size</b> parameter. </p> <InitialAvatar FirstName="gavin" LastName="baker" Size=150 Style="border-radius: 50%" />

The above Razor code will be rendered like this:

Identicon Avatar