@elmqeddem/react-avatar

About This Package

As a solo project builder working on www.invoaza.com, I ran into a persistent UI problem: I needed each user to have a clean, consistent avatar that could:

- Automatically generate a unique color
- Show initials if no picture was available
- Display custom icons or emojis when needed

The existing solutions I tried were either too heavy, didn’t support full TypeScript typing, or didn’t work well with modern frameworks like Next.js. This made it harder to build a professional, consistent UI for our community users on Invoaza.

So I built @elmqeddem/react-avatar — a simple, lightweight React component that checks all those boxes, while being fully typed, customizable, and compatible with React 18+, Next.js, Vite, and CRA.

> Perfect for:
> - CRM dashboards — quickly show client/user avatars with unique colors
> - Team management tools — display initials when profile pictures aren’t available
> - Community platforms — use custom emojis or icons to make avatars more engaging
> - Any React project that needs lightweight, customizable, and professional avatars

---

Installation

``bash
npm install @elmqeddem/react-avatar
`

Usage (React)

`
import { Avatar } from "@elmqeddem/react-avatar";
import { User, Camera } from "lucide-react";

export default function App() {
return (



`

Usage (Next.js App Router)

`
"use client";

import { Avatar } from "@elmqeddem/react-avatar";

export default function Page() {
return ;
}

``