# Vue component for Avatars
This is a port from  Sketch library [Avataaars](https://avataaars.com/) designed by [Pablo Stanley](https://twitter.com/pablostanley). 

## Features
 - SVG based
 - Light weight
 - Scalable
 - Easy to use
 - Easy to integrate with custom editor
 - Comes from [Avataaars](https://avataaars.com/)

#### 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 :
```html
  <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 :
```html
  <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
```html
    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"