Avatar using text:
Avatar using icon:
JD
Avatar using image:JD
'use client';
import { Avatar } from '@/ui/Avatar';
import { Icon } from '@clubmed/trident-icons';
export function AvatarDemo() {
return (
<div>
Avatar using text:
<Avatar alt="John Doe" />
Avatar using image:
<Avatar alt="John Doe" src="https://randomuser.me/api/portraits/men/75.jpg" />
Avatar using icon:
<Avatar alt="John Doe">
<Icon name="PeopleSingle" width="24px" />
</Avatar>
</div>
);
}
Installation
Usage
import Avatar from '@/docs/lib/ui/avatar';
export function Component() {
return <Avatar alt="John Doe" src="/path/to/image.jpg" />;
}