arihantdaga / ng-boring-avatars

A tiny Angular library that generates custom, SVG-based, round avatars from any username and color palette based on the React Boring Avatars library.

ng-boring-avatars

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.

Install

yarn add ng-boring-avatars

or

npm install ng-boring-avatars

Usage

1. Import NgBoringAvatarsModule into your app.module.ts file.

2. 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>