Beautifully crafted unique avatar placeholder for your next angular project.
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
@ngneat/avvvatars | Angular |
---|---|
1.x | >= 17 |
With yarn
yarn add @ngneat/avvvatars
With npm
npm install @ngneat/avvvatars
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="[email protected]"></avvvatars>
`
})
export class AppComponent {}
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="[email protected]" />
displayValue?: string
Override default text by providing displayValue
for example if you provide value=”[email protected]”
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="[email protected]" displayValue="BU" />
style?: character | shape (default character)
Use shape or character as avatar.
<avvvatars value="[email protected]" style="character" />
<avvvatars value="[email protected]" style="avatar" />
size?: number (default 32)
Override default size (32px) by providing a number.
<avvvatars value="[email protected]" size={32} />
shadow?: boolean (default false)
Enable shadow around the avatar.
<avvvatars value="[email protected]" 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="[email protected]" radius={10} />
border?: boolean (default false)
Toggle border
<avvvatars value="[email protected]" border={false} />
borderSize?: number (default 2)
Override border width
<avvvatars value="[email protected]" borderSize={2} />
borderColor?: string (default #fff)
Override border color
<avvvatars value="[email protected]" borderColor="#fff" />
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!