npm package: @poetadigital/vue-avatar
Description: > Avatar component
Author: info@poetadigital.com
Latest version: 0.2.0

# Avatar

> Avatar component

## Install

```shell
$ npm install @poetadigital/vue-avatar --save
```

## Getting Starting

How to use component

### Parameters

| Props            | Required | Default         | Type     | Description                                                                                                                                            |
|-----------------|----------|-----------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| username        | N        | -               | String   | The user name that will be used to compute user initial.                                                                                               |
| initials        | N        | -               | String   | Force the displayed initials by overriding the computed ones.                                                                                          |
| inline          | N        | fasle           | Boolean  | Uses inline-flex instead of flex                                                                                                                       |
| src             | N        | -               | String   | Path to the avatar image to display.                                                                                                                   |
| :customStyle    | N        | -               | Object   | A custom style object to override the base styles.                                                                                                     |
| backgroundColor | N        | -               | String   | The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length. |
| color           | N        | -               | String   | The font color used to render the user initials. If none is provided, the background color is used to compute the font color.                          |
| :lighten        | N        | 80              | Number   | A factor by which the background color must be lightened to produce the font color. Number between [-100,100].                                         |
| :size           | N        | 50              | Number   | The avatar size in pixel.                                                                                                                              |
| :rounded        | N        | true            | Boolean  | True if the avatar must be rounded.                                                                                                                    |
| :parser         | N        | [getInitials()] | Function | Custom parser to manipulate the string (the parser takes 2 params: a String and the default parser). It must return a String.          

### Usage

```vue
<template>
  <div class="App">
    <PAvatar username="Poeta Digital" :size="100"/>
  </div>
</template>

<script>
import PAvatar from '@poetadigital/vue-avatar';

export default {
  components: { PAvatar }
};
</script>

<style></style>
```

## License

MIT © [Poeta Digital](https://poetadigital.com)