@inventage-web-components/avatar-image/README.md

An avatar image based on user initials.

# @inventage-web-components/avatar-image

An avatar image based on user initials.

[![Published on npm](https://img.shields.io/npm/v/@inventage-web-components/avatar-image.svg?style=flat-square)](https://www.npmjs.com/package/@inventage-web-components/avatar-image)
[![License](https://img.shields.io/npm/l/@inventage-web-components/avatar-image?style=flat-square)](https://github.com/inventage/web-components/blob/main/LICENSE)
[![Release](https://img.shields.io/github/actions/workflow/status/inventage/web-components/release.yml?style=flat-square)](https://github.com/inventage/web-components/actions)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@inventage-web-components/avatar-image/latest?style=flat-square)](https://bundlephobia.com/package/@inventage-web-components/avatar-image@latest)

## Quick Start

Use [unpkg.com](https://unpkg.com/browse/@inventage-web-components/avatar-image/) to get a simple example running in a single HTML file:

```html
<script type="module" src="https://unpkg.com/@inventage-web-components/avatar-image/lib/src/avatar-image.js?module"></script>

<avatar-image input="John Doe"></avatar-image>
```

Here's an [example of this method](https://catkin-bottlenose-beetle.glitch.me/) to get you started.

## Installation

```bash
npm i @inventage-web-components/avatar-image
```

## Usage

```html
<!--
  Adjust path to node_modules and use a dev server that support Node module
  resolution, like Web Dev server: https://www.npmjs.com/package/@web/dev-server
-->
<script
  type="module"
  src="/node_modules/@inventage-web-components/avatar-image/lib/src/avatar-image.js"
</script>

<avatar-image input="John Doe"></avatar-image>
```

## Documentation

The API documentation as well as interactive examples can be found in the [Storybook examples](https://inventage.github.io/web-components/?path=/story/avatar-image--default).