# @vcraescu/vue-avatar

> User avatar component for VueJS 2.

Latest version **0.2.4** (published 2019-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vcraescu/vue-avatar
pnpm add @vcraescu/vue-avatar
yarn add @vcraescu/vue-avatar
bun add @vcraescu/vue-avatar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2019-10-07 |
| First published | 2019-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 568.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Viorel Craescu |
| Maintainers | vcraescu |
| Keywords | vue, avatar, user, gravatar, letter |

## Links

- npm: https://www.npmjs.com/package/@vcraescu/vue-avatar
- Repository: https://github.com/vcraescu/vue-avatar
- Homepage: https://github.com/vcraescu/vue-avatar#readme
- Issues: https://github.com/vcraescu/vue-avatar/issues
- npm.io page: https://npm.io/package/@vcraescu/vue-avatar

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 0.2.4 (latest) — 2019-10-07
- 0.2.3 — 2019-10-06
- 0.2.2 — 2019-07-12
- 0.2.1 — 2019-07-12
- 0.2.0 — 2019-07-12
- 0.1.8 — 2019-06-04
- 0.1.7 — 2019-06-02
- 0.1.6 — 2019-06-02
- 0.1.5 — 2019-06-02
- 0.1.4 — 2019-06-02
- 0.1.3 — 2019-06-02
- 0.1.2 — 2019-06-02
- 0.1.1 — 2019-06-01
- 0.1.0 — 2019-06-01

## README

# vue-avatar

User avatar component for VueJS 2.

This component will displayed an avatar for image or a letter avatar if no url image is provided or the image cannot 
be loaded. Avatar image is loaded in background.

## Installation
```
npm install @vcraescu/vue-avatar
```

## Usage

#### ES6

```js
import VueAvatar from "@vcraescu/vue-avatar";

export default {
    ...
    components: {
        VueAvatar,
    },
    ...
}
```

After that you can use it in your templates:
```
<div style="width: 48px">
    <vue-avatar name="John Doe" url="https://i.pravatar.cc/300" block />
</div>
```

## Props
<table class="table">
<thead><tr>
  <th>Name</th><th>Required?</th><th>Default</th><th>Type</th><th>Description</th>
</tr></thead>
<tbody>
  <tr><td>name</td>
    <td> Yes </td>
    <td> - </td>
    <td> String </td>
    <td>The name used to compute letter avatar initials and background color is picked randomly based on this.
    Only first 2 initials will be displayed.</td></tr>
  <tr><td>url</td>
    <td> No </td>
    <td> - </td>
    <td> String </td>
    <td>If the url cannot be loaded, letter avatar will be displayed instead.</td></tr>
  <tr><td>rounded</td>
    <td> No </td>
    <td> false </td>
    <td> Boolean </td>
    <td>True if avatar must be displayed rounded.</td></tr>
  <tr><td>fgColor</td>
    <td> No </td>
    <td> #ffffff </td>
    <td> String </td>
    <td>Color hex code for letter avatar text.</td></tr>
  <tr><td>bgColor</td>
    <td> No </td>
    <td> - </td>
    <td> String </td>
    <td>Force to use this color for letter avatar background instead of random color.</td></tr>
  <tr><td>bgColorPalette</td>
    <td> No </td>
    <td> - </td>
    <td> Array </td>
    <td>Letter avatar background color will be randomly choosen from this array.</td></tr>
  <tr><td>block</td>
    <td> No </td>
    <td> false </td>
    <td> Boolean </td>
    <td>Scales to the size of the containers: width=100%, height=100%</td></tr>
  <tr><td>width</td>
    <td> No </td>
    <td> 100 </td>
    <td> Number </td>
    <td>Set avatar width</td></tr>
  <tr><td>height</td>
    <td> No </td>
    <td> 100 </td>
    <td> Number </td>
    <td>Set avatar height</td></tr>
</tbody>
</table>

##### Default Background Color Palette
<table class="table">
<tbody>
  <tr>
    <td>#e53935</td>
    <td>#d81b60</td>
    <td>#d81b60</td>
    <td>#c51162</td>
  </tr>
  <tr>
    <td>#5e35b1</td>
    <td>#3949ab</td>
    <td>#1e88e5</td>
    <td>#0288d1</td>
  </tr>
  <tr>
    <td>#0097a7</td>
    <td>#00bfa5</td>
    <td>#d81b60</td>
    <td>#00b8d4</td>
  </tr>
  <tr>
    <td>#00bfa5</td>
    <td>#00b8d4</td>
    <td>#00796b</td>
    <td>#2e7d32</td>
  </tr>
  <tr>
    <td>#558b2f</td>
    <td>#827717</td>
    <td>#9e9d24</td>
    <td>#f57f17</td>
  </tr>
  <tr>
    <td>#ff6f00</td>
    <td>#e65100</td>
    <td>#6d4c41</td>
    <td>#4e342e</td>
  </tr>
  <tr>
    <td>#616161</td>
    <td>#455a64</td>
    <td>#263238</td>
    <td>#ff80ab</td>
  </tr>
</tbody>
</table>

## Build Setup

```
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build 
npm run build:bundle
```

---
_Source: https://npm.io/package/@vcraescu/vue-avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._