<div align="center"> <img width="20%" height="20%" src="./assets/logo.svg?raw=true"> </div> <br />

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

<!-- ALL-CONTRIBUTORS-BADGE:END -->

@ngneat/avvvatars

Beautifully crafted unique avatar placeholder for your next angular project. Inspired from avvvatars

https://github.com/ngneat/avvvatars/assets/6831283/c6cdd732-3037-4732-8019-4f4906076a51

Compatibility with Angular Versions

<table> <thead> <tr> <th>@ngneat/avvvatars</th> <th>Angular</th> </tr> </thead> <tbody> <tr> <td> 1.x </td> <td> >= 17 </td> </tr> </tbody> </table>

Features

• 🌈 40 Colors - Colors are so on point that most of the projects can use it without changing it
• 💠 60 Shapes - Beautifully crafted shapes that are unique to your user with color combination
• 🆎 Text or Shapes 🔸 - Use letters (eg. JD for John Doe) or unique shapes
• 🤠 Unique to user - Generated avatars are unique to the string that you provide, it means if you pass janedoe@gmail.com you will always get the same avatar
• ✍️ Customizable - use shadows, change size, provide alternative text to display

Installation

With yarn

yarn add @ngneat/avvvatars

With npm

npm install @ngneat/avvvatars

Getting Started

Import @ngneat/avvvatars to your app, then use it anywhere you want.

import { AvvvatarsComponent } from '@ngneat/avvvatars';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AvvvatarsComponent],
  template: `
  <avvvatars value="best_user@gmail.com"></avvvatars>
  `
})
export class AppComponent {}

Customization

value: string

This is required for plugin to work, each value generates a random avatar to unique to this value, so each time plugin renders, you will get the same results.

<avvvatars value="best_user@gmail.com" />

displayValue?: string

Override default text by providing displayValue

for example if you provide value=”best_user@gmail.com” the character output will be the first 2 letters of value which is “BE”, if you pass displayValue=”BU” you can override it to BU

<avvvatars value="best_user@gmail.com" displayValue="BU" />

style?: character | shape (default character)

Use shape or character as avatar.

<avvvatars value="best_user@gmail.com" style="character" />
<avvvatars value="best_user@gmail.com" style="avatar" />

size?: number (default 32)

Override default size (32px) by providing a number.

<avvvatars value="best_user@gmail.com" size={32} />

shadow?: boolean (default false)

Enable shadow around the avatar.

<avvvatars value="best_user@gmail.com" shadow={false} />

radius?: number (default size)

Override the radius of the avatar, it takes size by default to always turn it to a circle

<avvvatars value="best_user@gmail.com" radius={10} />

border?: boolean (default false)

Toggle border

<avvvatars value="best_user@gmail.com" border={false} />

borderSize?: number (default 2)

Override border width

<avvvatars value="best_user@gmail.com" borderSize={2} />

borderColor?: string (default #fff)

Override border color

<avvvatars value="best_user@gmail.com" borderColor="#fff" />

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/shhdharmen"><img src="https://avatars.githubusercontent.com/u/6831283?v=4?s=100" width="100px;" alt="Dharmen Shah"/><br />_{<b>Dharmen Shah</b>}</a><br /><a href="https://github.com/ngneat/avvvatars/commits?author=shhdharmen" title="Code">💻</a> <a href="#content-shhdharmen" title="Content">🖋</a> <a href="#design-shhdharmen" title="Design">🎨</a> <a href="https://github.com/ngneat/avvvatars/commits?author=shhdharmen" title="Documentation">📖</a> <a href="#example-shhdharmen" title="Examples">💡</a> <a href="#ideas-shhdharmen" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-shhdharmen" title="Maintenance">🚧</a> <a href="#platform-shhdharmen" title="Packaging/porting to new platform">📦</a></td> <td align="center" valign="top" width="14.28%"><a href="https://www.netbasal.com/"><img src="https://avatars.githubusercontent.com/u/6745730?v=4?s=100" width="100px;" alt="Netanel Basal"/><br />_{<b>Netanel Basal</b>}</a><br /><a href="#business-NetanelBasal" title="Business development">💼</a> <a href="#mentoring-NetanelBasal" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/ngneat/avvvatars/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal" title="Reviewed Pull Requests">👀</a></td> </tr> </tbody> <tfoot> <tr> <td align="center" size="13px" colspan="7"> <img src="https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg"> <a href="https://all-contributors.js.org/docs/en/bot/usage">Add your contributions</a> </img> </td> </tr> </tfoot> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!