@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
@ngneat/avvvatars | Angular |
---|---|
1.x | >= 17 |
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):
Dharmen Shah 💻 🖋 🎨 📖 💡 🤔 🚧 📦 |
Netanel Basal 💼 🧑🏫 👀 |
|||||
Add your contributions |
This project follows the all-contributors specification. Contributions of any kind welcome!