# vue-avatar-or-initials

> Easy avatars or initials

Latest version **1.0.7** (published 2018-10-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-avatar-or-initials
pnpm add vue-avatar-or-initials
yarn add vue-avatar-or-initials
bun add vue-avatar-or-initials
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2018-10-01 |
| First published | 2018-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 53.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Darryn Ten |
| Maintainers | darrynten |

## Links

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

## Dependencies (1)

- [md5](https://npm.io/package/md5.md) ^2.2.1

## Recent versions

- 1.0.7 (latest) — 2018-10-01
- 1.0.6 — 2018-10-01
- 1.0.5 — 2018-10-01
- 1.0.4 — 2018-10-01
- 1.0.3 — 2018-10-01
- 1.0.2 — 2018-09-29
- 1.0.1 — 2018-09-29
- 1.0.0 — 2018-04-16

## README

# vue-avatar-or-initials

[![Build Status](https://travis-ci.com/darrynten/vue-avatar-or-initials.svg?token=2azvxgpyzAkLb1UEKNft&branch=dev)](https://travis-ci.com/darrynten/vue-avatar-or-initials)
[![codecov](https://codecov.io/gh/darrynten/vue-avatar-or-initials/branch/dev/graph/badge.svg?token=OWHCx5Vu5Q)](https://codecov.io/gh/darrynten/vue-avatar-or-initials)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/2d265f205ff7479294eb551ceef9a5c1)](https://www.codacy.com?utm_source=github.com&utm_medium=referral&utm_content=darrynten/vue-avatar-or-initials&utm_campaign=Badge_Grade)

## Avatar or Initials

Displays either the initials or the image for an avatar.

## Usage

```
import AvatarOrInitials from 'vue-avatar-or-initials'
```

Include it in the template you'd like to use it in.

Title is the only required property, size, round and image are optional.

Size defaults to 40px.

Round defaults to false (square avatar).

### Basic

This will result in a 40px square avatar with the letter E

```
<avatar-or-initials class="item-avatar"
                    title="Example">
</avatar-or-initials>
```

### Advanced

This will display an image in a 46px round avatar

```
<avatar-or-initials class="item-avatar"
                    round
                    size="46"
                    image="https://example.com/example.jpeg"
                    title="Example">
</avatar-or-initials>
```

You can override the default random colours yourself

```
<avatar-or-initials class="item-avatar"
                    round
                    colour="red"
                    backgroundColour="#fff"
                    title="Example">
</avatar-or-initials>
```

## Details

It uses the hash of the title to derive a number that it uses to select
an entry from an array of colours when there is no image. It does this to consistently provide the same colour for a given title.

It does contrast detection to determine whether or not it should show 
the initial in light or dark font.

# Roadmap

- [ ] - Configuree own font
- [ ] - More efficient selection algo (needs md5.js atm, would be nice to not have that dependency)

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