vue3-avataaars

Simple random avatar generation for Vue3.

Implemented with avataaars designed by Pablo Stanley and inspired by Or Gordin's vuejs-avataaars.

Installation

npm install vue3-avataaars

Usage

While the library enables random avatars, the component itself requires a full set of parameters. The assumption here is that it is useful to know what parameters went into creating an avatar. For example, so that those parameters can be persisted.

import { Avatar, Factory } from 'vue3-avataaars';
const props = Factory()

<Avatar v-bind="props" />

Parameters

The list of available parameters can be viewed in Types.ts.

{
  isCircle: boolean, // Place avatar in a background-circle

  circleColor?: Hex,
  hairColor: Hex,
  skinColor: Hex,
  clothesColor: Hex,
  topColor: Hex,
  facialHairColor: Hex,

  clothes: keyof typeof Clothes,
  graphicShirt: keyof typeof GraphicShirt,
  top: keyof typeof Tops,
  accessories: keyof typeof Accessories,
  facialHair: keyof typeof FacialHair,
  eyes: keyof typeof Eyes,
  eyebrows: keyof typeof Eyebrows,
  mouth: keyof typeof Mouths,
}

A very simple implementation can be seen in action at vue3-avataaars.com