This package is used to avatars which are used to symbolize people or objects.
npm install @react-md/avatarCreate avatars to represent people or objects with images, icons, or text.
Different theme colors can also be applied for icons or text.
``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
You should check out the
full documentation for live
examples and more customization information, but an example usage is shown
below.
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) => (
}
key={i}
leftAddon={} />}
leftAddonType="avatar"
>
{name}
))}
);
render(
``