[](https://www.npmjs.com/package/@ngxpert/avvvatars)
[](https://github.com/ngxpert/avvvatars/blob/master/LICENSE)
[]()
[](https://github.com/ngxpert/avvvatars/compare)
[](https://github.com/prettier/prettier)
[](https://github.com/prettier/prettier)
[](https://github.com/ngxpert/)
[](https://github.com/semantic-release/semantic-release)
[](#contributors-)
# @ngxpert/avvvatars
> Beautifully crafted unique avatar placeholder for your next angular project. Inspired from [avvvatars](https://github.com/nusu/avvvatars)
https://github.com/ngneat/avvvatars/assets/6831283/c6cdd732-3037-4732-8019-4f4906076a51
## Compatibility with Angular Versions
@ngxpert/avvvatars
Angular
1.x
>= 17 < 18
2.x
>= 18
## 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
### `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.
```html
```
### `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**
```html
```
### `style?: character | shape (default character)`
Use shape or character as avatar.
```html
```
### `size?: number (default 32)`
Override default size (32px) by providing a number.
```html
```
### `shadow?: boolean (default false)`
Enable shadow around the avatar.
```html
```
### `radius?: number` (default [size](#size-number-default-32))
Override the radius of the avatar, it takes `size` by default to always turn it to a circle
```html
```
### `border?: boolean (default false)`
Toggle border
```html
```
### `borderSize?: number (default 2)`
Override border width
```html
```
### `borderColor?: string (default #fff)`
Override border color
```html
```
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Add your contributions