Skip to content
/ avvvatars Public

Beautifully crafted unique avatar placeholder for your next react project

License

Notifications You must be signed in to change notification settings

nusu/avvvatars

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Avvvatars

Avvvatars

Beautifully crafted unique avatar placeholder for your next react project

Lightweight and customizable ❤️

demo.mp4

Live Demo 🧩 | Website 🧘‍♀️

Built by Nusu Alabuga and Oguz Yagiz Kara

🙏 Special thanks to Monika Michalczyk for awesome shapes 🙏

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
  • 🕊 Lightweight - less than 20kb compressed + gzipped
  • ✍️ Customizable - use shadows, change size, provide alternative text to display

Installation

With yarn

yarn add avvvatars-react

With npm

npm install avvvatars-react

Getting Started

Import Avvvatars to your app, then use it anywhere you want.

import Avvvatars from 'avvvatars-react'

export default function MyAvatar() {
  return (
    <Avvvatars value="best_user@gmail.com" />
  )
}

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

style?: character | shape (default character)

Use shape or character as avatar.

<Avvvatars value="best_user@gmail.com" style="character" />

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

Figma

If you want to access design files to change something or customize it to your own, use our Figma File

License

MIT