# @consent/avatar

> avatar

Latest version **1.0.0-alpha.5** (published 2018-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @consent/avatar
pnpm add @consent/avatar
yarn add @consent/avatar
bun add @consent/avatar
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.5 |
| Published | 2018-11-21 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Michael Chan |
| Maintainers | chantastic |

## Links

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

## Recent versions

- 1.0.0-alpha.5 (latest) — 2018-11-21
- 1.0.0-alpha.4 — 2018-11-21
- 1.0.0-alpha.3 — 2018-11-15
- 1.0.0-alpha.2 — 2018-11-15
- 1.0.0-alpha.1 — 2018-11-14
- 1.0.0-alpha.0 — 2018-11-14

## README

# `@consent/avatar`

> A circular image representing one person

## Usage

`npm -i @consent/avatar`

- [NPM](https://www.npmjs.com/package/@consent/avatar)
- [UNPKG](http://unpkg.com/@consent/avatar)

### React

```jsx
import Avatar from "@consent/avatar";
import "@consent/avatar.css";

<Avatar
  src="path/to/avatar.png"
  alt="some avatar"
  size={4}
  inset={true}
/>;
```

### CSS

First, link the stylesheet, relative to your platform.

```html
<span class="Avatar Avatar--size_4 Avatar--inset_true">
  <img src="path/to/avatar.png" alt="some avatar" />
</span>
```

## Properties

### size: `string | number`

Controls size in `8px` increments.

values: `3, 4, 5, 6, 7, 8, 9, "20px", "profile"`

### inset: `boolean`

Insets the component

## Theming with CSS Custom Properties

```css
:root {
  --consent-avatar-inset-color: white;
}
```

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