DEV Community

Cover image for Announcing @ngneat/avvvatars
Dharmen Shah
Dharmen Shah

Posted on

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

demo

Installation

With yarn

yarn add @ngneat/avvvatars
Enter fullscreen mode Exit fullscreen mode

With npm

npm install @ngneat/avvvatars
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

View live demo on

@ngneat/avvvatars

favicon ngneat.github.io

Checkout full documentation on

GitHub logo ngneat / avvvatars

Beautifully crafted unique avatar placeholder for your next angular project.


npm MIT commitizen PRs styled with prettier linted with eslint ngneat semantic-release

All Contributors

@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 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
Enter fullscreen mode Exit fullscreen mode

With npm

npm install @ngneat/avvvatars
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

import { AvvvatarsComponent } from '@ngneat/avvvatars';
@Component
…
Enter fullscreen mode Exit fullscreen mode

Top comments (0)