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 emojitar
Import 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="[email protected]" />
displayValue?: string
It is the text that will be displayed instead of the value property in the avatar.
<Avatar value="[email protected]" displayValue="AK" />
emoji ?: none
Just specify the prop emoji to display emoji instead of initials.
<Avatar value="[email protected]" emoji />
size ?: (number | 32)
Specify the size of the avatar. Or it is set to 32 by default.
<Avatar value="[email protected]" size={36} />
radius ?: number
Specify the radius of the avatar, else it defaults to full rounded corners.
<Avatar value="[email protected]" radius={6} />
shadow ?: none
This property applies a subtle shadow beneath the avatar.
<Avatar value="[email protected]" shadow />
border ?: none
Apply this property to activate border on the avatar.
<Avatar value="[email protected]" 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="[email protected]" border borderSize={6} />
borderColor ?: string
Accepts a string of valid CSS color code. Or else default to predefined color set.
<Avatar value="[email protected]" border borderColor="#06dea6" />
Hope you enjoy this library!
MIT