Blazor library that provide components to create avatar.
$ dotnet add package Blazor.AvatarThis Blazor library provides components that render avatar. Currently this library only supports initial avatar.
This library has been tested only with Blazor WebAssembly.
Install package from Nuget.
dotnet add package Blazor.Avatar --version <latest-version>
Before we can start using the avatar components, we must do:
Blazor.Avatar dependencies by calling AddAvatarComponents() in Program.cs.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();
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.
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:
This is pretty much a wrapper of this JS library: https://github.com/laurentpayot/minidenticons. This library is currently using version 4.2.1 of this JS minidenticons library.
<PageTitle>Identicon Avatar</PageTitle>
<h1>Identicon Avatar</h1>
<IdenticonAvatar Username="x"
Saturation=58
Lightness=22
Style="background-color: green; display: list-item; height: 148px; width: 148px;" />
<IdenticonAvatar Username="feeding bird in forest"
Saturation=58
Lightness=9
HashFunc="@(s => 1234)"
Style="background-color: grey; height: 300px; width: 300px;" />This is a wrapper for DiceBear avatar.
The complete list of available styles are documented in here.
The official DiceBear playground is here.
<DiceBearAvatar AvatarStyle="thumbs" DefaultSeed="john" />
<DiceBearAvatar AvatarStyle="bigSmile" Options="@(new Dictionary<string, object> { { "seed", "jane" }, { "flip", true } })" />