Announcing @ngneat/avvvatars

📢 Announcing @ngneat/avvvatars

Beautifully crafted unique avatar placeholder for your next angular project.

🌈 40 Colors
💠 60 Shapes
🆎 Text or Shapes
🤠 Unique to user
✍️ Customizable

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="[e-mail]"></avvvatars>
  `
})
export class AppComponent {}

View live demo on

@ngneat/avvvatars

ngneat.github.io

Checkout full documentation on

ngneat / avvvatars

Beautifully crafted unique avatar placeholder for your next angular project.

@ngneat/avvvatars

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

demo.mp4

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 [e-mail] 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

…

View on GitHub