@nature-ui/avatar
v2.2.13
Published
A base React component for icons
Downloads
26
Readme
@nature-ui/avatar
The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
Installation
yarn add @nature-ui/avatar
# or
npm i @nature-ui/avatar
Import components
import { Avatar, AvatarGroup } from '@nature-ui/avatar';
Basic Usage
Simply import the Avatar
component and pass it the image src
and name of the
user in the avatar.
<Avatar src='john-doe.png' name='John doe' />
Stack Avatars in a group by using the AvatarGroup
component
<AvatarGroup size='md' max={2}>
<Avatar size='2xl' name='Divine Nature' src='https://tinyurl.com/y4mmkc9v' />
<Avatar name='Ryan Florence' src='https://bit.ly/ryan-florence' />
<Avatar name='Segun Adebayo' src='https://bit.ly/sage-adebayo' />
<Avatar name='Kent Dodds' src='https://bit.ly/kent-c-dodds' />
<Avatar name='Prosper Otemuyiwa' src='https://bit.ly/prosper-baba' />
<Avatar name='Christian Nwamba' src='https://bit.ly/code-beast' />
</AvatarGroup>