<tyro-ui-avatar>

Avatar

Profile avatar matching the navbar design - gradient border ring. [src] takes priority, otherwise tyrolium.fr/generate-pp is used from [name]. Nothing is rendered if both are absent.

Generated from name

[name] → tyrolium.fr/generate-pp?l=X&c=HEXCOLOR
Alice Martin
Bob Dupont
Charlie Lee
Diana Prince
Maxime Tournier

With [src]

Direct image URL - gradient ring

Sizes

xs=24px / sm=32px / md=40px / lg=56px
Maxime Tournier
Maxime Tournier
Maxime Tournier
Maxime Tournier

Inputs

Property
Type
Default
Description
[src]string (URL)-Profile picture URL
[name]string-Full name - initials computed when no src
[size]'xs' | 'sm' | 'md' | 'lg''md'Size: xs=24px, sm=32px, md=40px, lg=56px

Image resolution order

1. [src]  fourni   → image directe
2. [name] fourni   → https://tyrolium.fr/generate-pp/?l={1ère lettre}&c=183153
3. rien             → rien n'est rendu