@react-md/avatar

Create avatars to represent people or objects with images, icons, or text.
Different theme colors can also be applied for icons or text.

Installation

``sh
npm install --save @react-md/avatar
`

It is generally recommended to also install the following packages since they
work hand-in-hand with this package:

`sh
npm install --save @react-md/theme \
@react-md/typography \
@react-md/list \
@react-md/icon
`

Documentation

You should check out the
full documentation for live
examples and more customization information, but an example usage is shown
below.

Usage

One of the main use-cases will probably be to display a list of people with
specific avatars with them:

`tsx
import { render } from "react-dom";
import { Avatar } from "@react-md/avatar";
import { List, ListItem } from "@react-md/list";

const people = [
{ name: "Logan Tyler", avatarUrl: "https://some-picture.com" },
{ name: "Trenton Berry", avatarUrl: "https://some-picture.com" },
{ name: "Damon Fletcher", avatarUrl: "https://some-picture.com" },
{ name: "Thomas Owen", avatarUrl: "https://some-picture.com" },
{ name: "Charity Henderson", avatarUrl: "https://some-picture.com" },
];

const App = () => (

{people.map(({ name, avatarUrl }, i) => (
id={person-${i}}
key={i}
leftAddon={${name}'s avatar'} />}
leftAddonType="avatar"
>
{name}

))}

);

render(, document.getElementById("root"));
``