# vue-sphere-avatar

> A simple component to display a sphere-shaped avatar for users, accounts, companies etc. An image can be used but falls back to initials on a colored background.

Latest version **0.1.7** (published 2019-03-01) · 0 weekly downloads

## Install

```sh
npm install vue-sphere-avatar
pnpm add vue-sphere-avatar
yarn add vue-sphere-avatar
bun add vue-sphere-avatar
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2019-03-01 |
| First published | 2019-01-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jayjaydluffy |

## Links

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

## Dependencies (2)

- [fitty](https://npm.io/package/fitty.md) ^2.2.6
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1

## Recent versions

- 0.1.7 (latest) — 2019-03-01
- 0.1.6 — 2019-03-01
- 0.1.5 — 2019-03-01
- 0.1.4 — 2019-01-29
- 0.1.3 — 2019-01-23
- 0.1.2 — 2019-01-23
- 0.1.1 — 2019-01-23
- 0.1.0 — 2019-01-23

## README

# Vue Sphere Avatar
A simple component to display a sphere-shaped avatar for users, accounts, companies etc. An image can be used but falls back to initials on a colored background.

## Installation
```
npm install --save vue-sphere-avatar
```

## Usage
You can either use the component globally or locally.

### Globally
In your `main.js`, just import the library using:
```
import 'vue-sphere-avatar'
```
Then use the component directly in your template
```
<sphere-avatar :name="'Strawhat Pirates'" />
```
### Locally
Example usage in a SFC (single file component):
```
<template>
  <div>
    <sphere-avatar :name="'Strawhat Pirates'" />
  </div>
</template>

<script>
import SphereAvatar from 'vue-sphere-avatar';
export default {
  components: {
    SphereAvatar,
  },
}
</script>
```
### Props
| Name | Default | Type | Description
|--|--|--|--|
| src | null | String | Image source e.g. "https://picsum.photos/200" |
| size | 50 | Number | How big is the sphere in height and width |
| name | - | String | The name where the initials shall be extracted if none is provided |
| initials | - | String | The initials to put inside the sphere. If none is not provided, it will extracted from `name`. If `name` isn't provided a `?` is displayed. |
| color | - | String, Object | The background color of choice. String and Object inputs specified in [tinycolor2](https://www.npmjs.com/package/tinycolor2#accepted-string-input) are allowed. An invalid input would return black. <br> In case no value is provided, a color based on the `name` or `initials` will be assigned. This is to make sure the color doesn't change on every DOM update.|
| maxFontSize | 512 | Number | If you want a non-fit avatar display for initials, specify a maximum font size |
| minFontSize | 16 | Number | Minimum font size |

#### Fitty
[Fitty](https://github.com/rikschennink/fitty) is utilized to scale up or down the initials so it fits perfectly inside the sphere. To change how that looks, just specify `maxFontSize` and/or `minFontSize` accordingly.

#### Text color - Light or Dark
Text color is automatically contrasted to the background color via `tinycolor2`.

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