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

The library comes with 2 main parts. An Avatar component for use in templates and Factory method for generating an object of parameters for your Avatar (e.g. hair color, clothes type etc).

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