Based on the awesome React Boring Avatars project this is the tiny Angular library that generates custom, SVG-based, round avatars from any username and color palette.
For a demo of how the avatars render please check out the Boring Designers demo website here. Although based around React you can expect the same results in Angular with this library.
yarn add ng-boring-avatarsor
npm install ng-boring-avatars-
Import
NgBoringAvatarsModuleinto yourapp.module.tsfile. -
Then in your component template you can use:
<!-- Bauhaus Avatar -->
<ng-boring-avatars-bauhaus-avatar
name="Mary Baker"
[colors]="['#a3a948','#edb92e','#f85931','#ce1836','#009989']"
[inputSize]="80"
></ng-boring-avatars-bauhaus-avatar>
<!-- Beam Avatar -->
<ng-boring-avatars-beam-avatar
name="Mary Baker"
[colors]="['#a3a948','#edb92e','#f85931','#ce1836','#009989']"
[inputSize]="80"
></ng-boring-avatars-beam-avatar>
<!-- Marble Avatar -->
<ng-boring-avatars-marble-avatar
name="Mary Baker"
[colors]="['#a3a948','#edb92e','#f85931','#ce1836','#009989']"
[inputSize]="80"
></ng-boring-avatars-marble-avatar>
<!-- Pixel Avatar -->
<ng-boring-avatars-pixel-avatar
name="Mary Baker"
[colors]="['#a3a948','#edb92e','#f85931','#ce1836','#009989']"
[inputSize]="80"
></ng-boring-avatars-pixel-avatar>
<!-- Ring Avatar -->
<ng-boring-avatars-ring-avatar
name="Mary Baker"
[colors]="['#a3a948','#edb92e','#f85931','#ce1836','#009989']"
[inputSize]="80"
></ng-boring-avatars-ring-avatar>
<!-- Sunset Avatar -->
<ng-boring-avatars-sunset-avatar
name="Mary Baker"
[colors]="['#a3a948','#edb92e','#f85931','#ce1836','#009989']"
[inputSize]="80"
></ng-boring-avatars-sunset-avatar>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent