ng-avataaars

ng-avataaars is an angular component you can include in your project to allow users to make their own avatars.

You can also use it here to get the generated svg for your own use.

Features

• Billions of permutations of avatars available.
• Svgs are generated on client.
• Can be localised into other languages
• Unwanted options can be turned of
• Can wire up your own services to save/load avatar. This example uses local storage.
• Uses bootstrap for styling. So you will need to add bootstrap to your css files.

Angular component ported from the React Component developed by Fang-Pen Lin, based on the Sketch library Avataaars designed by Pablo Stanley.

Free for personal and commercial use.

Using the package

Navigate to the level of your package.json and type

 npm install ng-avataaars-library --save

Import the module into your app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgAvataaarsLibraryModule } from 'ng-avataaars-library';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgAvataaarsLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You can then use in one of your component html pages.

<kip-custom-avatar (avatarSaved)="onAvatarSaved($event)" [avatarSelection]="avatarSelection"></kip-custom-avatar>

Options that can be passed in

avatarSelection - used for setting the current avatar.

interface AvatarSelection {
  avatarStyle: AvatarStyle;
  topType: TopType;
  accessoriesType: AccessoriesType;
  hairColor: HairColor;
  facialHairType: FacialHairType;
  facialHairColor: HairColor;
  clotheType: ClotheType;
  clotheColor: ClotheColor;
  clotheColor2: ClotheColor;
  clotheColor3: ClotheColor;
  eyeType: EyeType;
  eyebrowType: EyebrowType;
  eyebrowColor: HairColor;
  mouthType: MouthType;
  skinColor: SkinColor;
  backgroundColor: BackgroundColor;
  graphicType: GraphicType;
  petType: PetType;
  awardType: AwardType;
  hatColor: HatColor;
  accessoriesColor: AccessoriesColor;
  noseType: NoseType;
  earringType: EarringType;
  earringColor: EarringColor;
}

avatarText - used for localizing.

interface AvatarText {
  save: string;
  random: string;
  revert: string;
  svg: string;
  background: string;
  backgroundColor: string;
  eyes: string;
  eyebrows: string;
  eyebrowColors: string;
  accessories: string;
  accessoryColors: string;
  facialHairs: string;
  facialHairColors: string;
  noses: string;
  mouths: string;
  pets: string;
  awards: string;
  hatsAndHairStyles: string;
  hairColors: string;
  hatColors: string;
  clothes: string;
  clotheColors1: string;
  clotheColors2: string;
  clotheColors3: string;
  graphics: string;
  skinColors: string;
  earrings: string;
  earringColors: string;
}

avatarExclusion - used for disabling choices. Example

avatarExclusion: AvatarExclusion = {
    mouthTypes: [MouthType.Vomit],
    graphicTypes: [GraphicType.Hola],
    topTypes: [TopType.Eyepatch],
    eyeTypes: [EyeType.Dizzy]
  };

Config options available

| Option | Type | Default | Description | | --- | --- | --- | --- | | noNose | boolean | true | Turns on nose choices (being extended) | | noEarring | boolean | true | Turns on earring choices (being extended) | | noPet | boolean | true | Turns on pet choices (being extended) - appears bottom left | | noAward | boolean | true | Turns on awards/birthday graphics (being extended) - appears bottom right | | noFacialHair | boolean | true | Turns off ability to choose/see facial hair - could be used for children/women | | noSvgOutput | boolean | true | Disables ability to see/use svg output button | | noRandom | boolean | false | Disables ability to see/use random button | | noColorBackground | boolean | false | Disables ability to choose the background/circle option | | noSave | boolean | false | Disables ability to see/use save button |

Saving of the avatar can be achieved by wiring up the avatarSaved event.

Example using local storage.

import { Component } from '@angular/core';
import { AccessoriesColor, AccessoriesType, AvatarSelection, AvatarStyle, AwardType, BackgroundColor, ClotheColor, ClotheType, EarringColor, EarringType, EyebrowType, EyeType, FacialHairType, GraphicType, HairColor, HatColor, MouthType, NoseType, PetType, SaveAvatar, SkinColor, TopType } from 'ng-avataaars-library';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  avatarSelection: AvatarSelection = {
    avatarStyle: AvatarStyle.Circle,
    topType: TopType.ShortHairShortFlat,
    accessoriesType: AccessoriesType.Blank,
    hairColor: HairColor.Black,
    facialHairType: FacialHairType.Blank,
    facialHairColor: HairColor.Black,
    eyebrowColor: HairColor.Black,
    clotheType: ClotheType.BlazerShirt,
    clotheColor: ClotheColor.Blue02,
    clotheColor2: ClotheColor.Blue01,
    clotheColor3: ClotheColor.Black,
    eyeType: EyeType.Default,
    eyebrowType: EyebrowType.Default,
    mouthType: MouthType.Smile,
    skinColor: SkinColor.Light,
    backgroundColor: BackgroundColor.ColorH,
    graphicType: GraphicType.Bat,
    petType: PetType.None,
    awardType: AwardType.None,
    hatColor: HatColor.Black,
    accessoriesColor: AccessoriesColor.Black,
    noseType: NoseType.Default,
    earringType: EarringType.Blank,
    earringColor: EarringColor.Black
  };

  onAvatarSaved(saveAvatar: SaveAvatar) {
    localStorage.setItem('avatar', JSON.stringify(saveAvatar.avatarSelection));
  }

  ngOnInit() {
    const avatar = localStorage.getItem('avatar');
    if (avatar) {
      this.avatarSelection = JSON.parse(avatar);
    }
  }
}

Demo

A demo can be found here.