An avatar libraray for your next react project. This library is inspired from Avvvatars and emojis are taken from Phosphor Library
Visit the site made with super.so
- Generate unique avatars for your users
- Highly customisable
- 0 dependencies
- Switch between initials or emojis
Install it using you favourite packadge manager.
npm install emojitarImport the library and use the component
import { Emojitar as Avatar } from "emojitar";
export default function (props) {
return <Avatar value="Ashish Khare" displayValue="ak" />;
}value : string
It is a required field and avatar is generated on the basis of this property.
<Avatar value="flangdev3000@gmail.com" />displayValue?: string
It is the text that will be displayed instead of the value property in the avatar.
<Avatar value="flangdev3000@gmail.com" displayValue="AK" />emoji ?: none
Just specify the prop emoji to display emoji instead of initials.
<Avatar value="flangdev3000@gmail.com" emoji />size ?: (number | 32)
Specify the size of the avatar. Or it is set to 32 by default.
<Avatar value="flangdev3000@gmail.com" size={36} />radius ?: number
Specify the radius of the avatar, else it defaults to full rounded corners.
<Avatar value="flangdev3000@gmail.com" radius={6} />shadow ?: none
This property applies a subtle shadow beneath the avatar.
<Avatar value="flangdev3000@gmail.com" shadow />border ?: none
Apply this property to activate border on the avatar.
<Avatar value="flangdev3000@gmail.com" border />borderSize ?: (number | 2)
Set width of border. Defaults to 2. It is important to also pass border prop while using borderSize prop.
<Avatar value="flangdev3000@gmail.com" border borderSize={6} />borderColor ?: string
Accepts a string of valid CSS color code. Or else default to predefined color set.
<Avatar value="flangdev3000@gmail.com" border borderColor="#06dea6" />Hope you enjoy this library!
MIT