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
    },

Props of avatarOptions

A complete list of every options can be found here in the "./scr/avataaarsOptions.json"