@singleway/avatars-generator NPM

Vue component for Avatars

This is a port from Sketch library Avataaars designed by Pablo Stanley.

Features

SVG based
Light weight
Scalable
Easy to use
Easy to integrate with custom editor
Comes from Avataaars

How it works

Import the Avataaars component. Pass it an object called "avatarOptions" with some parameters. Let the magic happen.

Installation

npm install @singleway/avatars-generator --save

Usage

Using the Avataaars component with an avatarOptions input :

  <template>
    <Avataaars 
    // You can set any size as it does not exceed the maxWidth and maxHeight properties (264px by 280px)
    :width=200
    :height=200
    // Your avatar options
    :avatarOptions="{
      backgroundType: selectedBackgroundType,
      backgroundColor: selectedBackgroundColor,
      skinColor: selectedSkinColor,
      clothesType: selectedClothesType,
      clothesColor: selectedClothesColor,
      clothesGraphicsType: selectedClothesGraphicType,
      eyesType: selectedEyesType,
      eyebrowType: selectedEyebrowType,
      mouthType: selectedMouthType,
      facialHairType: selectedFacialHairType,
      facialHairColor: selectedFacialHairColor,
      accessoriesType: selectedAccessoriesType,
      topType: selectedTopType,
      topColor: selectedTopColor,
    }" />
  </template>

  <script>
  import Avataaars from 'vue-avataaars'

  export default {
    name: 'Your component',
    components: {
      Avataaars,
    },
  </script>

Using the Avataaars for random avatar generation :

  <template>
    // No props, no problems
    <Avataaars />
  </template>
  
  <script>
  import Avataaars from 'vue-avataaars'

  export default {
    name: 'Your component',
    components: {
      Avataaars,
    },
  </script>

Props for the Avataaars component

    iconName: {
      type: String,
      default: 'avatar',
      required: false,
    },
    width: {
      type: Number,
      default: 264,
      required: false,
    },
    height: {
      type: Number,
      default: 280,
      required: false,
    },
    avatarOptions: {
      type: Object, required: false
    },