Avatars RMWC ADDON

Avatars are virtual representations of users in a system.

- Module @rmwc/avatar
- Import styles:
- Using CSS Loader
- import '@rmwc/avatar/styles';
- Or include stylesheets
- '@rmwc/avatar/avatar.css'
- '@rmwc/icon/icon.css'
- '@material/ripple/dist/mdc.ripple.css'

``jsx
<>
src="images/avatars/blackwidow.png"
size="xsmall"
name="Natalia Alianovna Romanova"
/>
src="images/avatars/hulk.png"
size="small"
name="Bruce Banner"
/>
src="images/avatars/thor.png"
size="medium"
name="Thor Odinson"
/>
src="images/avatars/captainamerica.png"
size="large"
name="Steve Rogers"
/>
src="images/avatars/ironman.png"
size="xlarge"
name="Tony Stark"
/>

`

`jsx
<>






`

`jsx
src="images/avatars/blackwidow.png"
size="large"
name="Natalia Alianovna Romanova"
square
/>
`

`jsx
src="images/avatars/google.svg"
size="large"
contain
name="Google"
square
/>
`

Avatar Groups

This is for Avatars that are displayed in a corellated grouping or list.

`jsx

src="images/avatars/captainamerica.png"
name="Steve Rogers"
size="large"
interactive
/>
src="images/avatars/ironman.png"
name="Tony Stark"
size="large"
interactive
/>


`

`jsx

src="images/avatars/captainamerica.png"
name="Steve Rogers"
size="large"
interactive
/>
src="images/avatars/ironman.png"
name="Tony Stark"
size="large"
interactive
/>


`

Usage with other components

The avatar component has been designed to work nicely in any of the places you would use an icon.

`jsx
label="Enlist now!"
icon={
src="images/avatars/captainamerica.png"
name="Steve Rogers"
/>
}
/>
`

`jsx
label="Hulk Smash"
icon={}
/>
`

`jsx
label="Message Natalia..."
outlined
icon={
src="images/avatars/blackwidow.png"
name="Natalia Alianovna Romanova"
square
/>
}
/>
`

Avatar

| Name | Type | Description |
|------|------|-------------|
| contain | boolean | Contain the avatar image instead of covering. |
| interactive | boolean | Make the avatar interactive. |
| name | string | The name of the user. This will get converted to initials and set the hover title. |
| ripple | RipplePropT | Adds a ripple effect to the component |
| size | IconSizeT | The size of the avatar |
| square | boolean | Make the avatar square. |
| src | string | The url for the image. This gets passed to the Icon component. |

AvatarGroup

| Name | Type | Description |
|------|------|-------------|
| dense | boolean | Makes the list dense |

AvatarCount

| Name | Type | Description |
|------|------|-------------|
| interactive | boolean | Make the avatar interactive. |
| overflow | boolean | Optionally renders a "+" to indicate overlow. |
| size | IconSizeT | The size of the avatar |
| square | boolean | Make the avatar square. |
| value | number` | The number of users. |