Skip to content
This repository has been archived by the owner on Feb 20, 2024. It is now read-only.
/ avvvatars Public archive

Beautifully crafted unique avatar placeholder for your next angular project.

Notifications You must be signed in to change notification settings

ngneat/avvvatars

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

29 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


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

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" />

character 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
Dharmen Shah

πŸ’» πŸ–‹ 🎨 πŸ“– πŸ’‘ πŸ€” 🚧 πŸ“¦
Netanel Basal
Netanel Basal

πŸ’Ό πŸ§‘β€πŸ« πŸ‘€
Add your contributions

This project follows the all-contributors specification. Contributions of any kind welcome!