Basic Avatar Component


Avatars are a common UI component for applications. This is code handles the basic properties for an Avatar component using Typescript and React in TSX. Feel free to extend or refactor this code in any way you deem fit.

import React from 'react';
import './avatar.css';
export interface AvatarProps {
    /**The username of the user */
    name: string;
    /** An optional image to appear for an avatar */
    image?: {
        src: string;
    /** Determine if the avatar is circular or square */
    shape: 'circle' | 'square';
    /** The size of the avatar */
    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

export const Avatar = ({name,image,shape,size}:AvatarProps)=>{
    const initials = name.split(' ').map((word)=>word[0]).join('');
    return (
        <div className={['avatar',`avatar--shape-${shape}`, `avatar--size-${size}`].join(' ')}>
            {image ? <img className='avatar-image' src={image.src} alt={name}/> : <>{initials}</>}

    width: 55px;
    height: 55px;
    display: grid;
    place-content: center;
    background-color: azure;
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    border: 0;
    border-radius: 5em;
    cursor: pointer;
    line-height: 1;
    position: relative;
    overflow: hidden;
    align-self: center;
    height: 100%;
    width: 100%;
    margin: 0 0;
    position: absolute;
    object-fit: cover;

    border-radius: 0.75rem;

    border-radius: 5em;

    height: 35px;
    width: 35px;

    height: 45px;
    width: 45px;

    height: 55px;
    width: 55px;

    height: 75px;
    width: 75px;

    height: 100px;
    width: 100px;

    height: 125px;
    width: 125px;