Scalable Avatar fallback component that masks the circle with the user's initials to show the underlying background beneath.

avatar-fallback.tsx

import { createUniqueId, splitProps } from 'solid-js';
import type { JSX } from 'solid-js';

type Props = {
	firstName: string;
	lastName: string;
} & JSX.SvgSVGAttributes<SVGSVGElement>;

export function AvatarFallback(allProps: Props) {
	const id = createUniqueId();
	const [nonSvgProps, props] = splitProps(allProps, ['firstName', 'lastName']);

	// All values are relative to the viewBox
	// Use `size-X` className to scale the Avatar
	return (
		<svg viewBox="0 0 24 24" aria-label={`${nonSvgProps.firstName} ${nonSvgProps.lastName}`} {...props}>
			<circle cx="12" cy="12" r="12" fill="currentColor" mask={`url(#${id})`} />
			<defs>
				<mask id={id} x="0" y="0" width="24" height="24">
					<rect x="0" y="0" width="24" height="24" fill="white" />
					<text
						x="50%"
						y="50%"
						class="font-poppins font-medium leading-none tracking-tighter"
						font-size="10px"
						dominant-baseline="central"
						text-anchor="middle"
						fill="black"
					>
						{nonSvgProps.firstName[0]}
						{nonSvgProps.lastName[0]}
					</text>
				</mask>
			</defs>
		</svg>
	);
}

usage.tsx

<>
  {/* Shows at 48x48px with a dark background color */}
  <Avatar firstName="Jimmy" lastName="James" class="text-violet-600 size-12" />
</>