![commitizen]()


@ngxpert/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

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

``bash
yarn add @ngxpert/avvvatars
`

With npm

`bash
npm install @ngxpert/avvvatars
`

Getting Started

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

`typescript
import { AvvvatarsComponent } from '@ngxpert/avvvatars';

@Component({
selector: 'app-root',
standalone: true,
imports: [AvvvatarsComponent],
template:


})
export class AppComponent {}
`

Customization

$3

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.

`html

`

$3

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

`html

`

$3

Use shape or character as avatar.

`html


`

!character
!avatar

$3

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

`html

`

$3

Enable shadow around the avatar.

`html

`

$3

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

`html

`

$3

Toggle border

`html

`

$3

Override border width

`html

`

$3

Override border color

`html

``

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dharmen Shah 💻 🖋 🎨 📖 💡 🤔 🚧 📦	Netanel Basal 💼 🧑‍🏫 👀
Add your contributions

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