# Svelte-Boring-Avatars
![Screenshot 2021-09-01 100049](https://user-images.githubusercontent.com/61054234/131599513-98c3c763-9839-4539-8c83-0a3be137f59a.png)

A Svelte port of [Boring Avatars](https://github.com/boringdesigners/boring-avatars).

## Demo

[REPL](https://svelte.dev/repl/889946205a7542a4a6e0e1e7e98f37ba?version=4.2.9)

## Installation

```bash
npm install svelte-boring-avatars

# or

yarn add svelte-boring-avatars
```

## Usage

```svelte
<script lang="ts">
  import Avatar from 'svelte-boring-avatars';
</script>

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
/>
```

## Props

| Prop    | Type                                                     | Default                                                   |
| ------- | -------------------------------------------------------- | --------------------------------------------------------- |
| size    | number                                                   | 40                                                        |
| square  | boolean                                                  | false                                                     |
| variant | `"bauhaus", "beam", "marble", "pixel", "ring", "sunset"` | `"marble"`                                                |
| colors  | string[]                                                 | `["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]` |

## Reducing Bundle Size

This library is small as it is, but if you want to shave off some more load you can import a specific variant.

All the props stay the same except for the exclusion of `variant`.

```svelte
<script>
  import { AvatarBeam } from 'svelte-boring-avatars';
</script>

<AvatarBeam
  size={40}
  name="Maria Mitchell"
  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
/>
```