Avatar Generator

Installation

npm install @aryankarma/simple-avatar-generator

Code Examples

Basic Usage

Simple avatar generation with just an email

import { Avatar } from '@aryankarma/simple-avatar-generator';

function UserProfile({ email }) {
  return <Avatar email={email} />;
}

Custom Size

Control the avatar size

import { Avatar } from '@aryankarma/simple-avatar-generator';

function UserAvatar({ email }) {
  return (
    <Avatar 
      email={email} 
      size={150}
    />
  );
}

With Styling

Add custom CSS classes and styles

import { Avatar } from '@aryankarma/simple-avatar-generator';

function StyledAvatar({ email }) {
  return (
    <Avatar 
      email={email}
      size={100}
      className="rounded-full border-2 border-blue-500"
      style={{ boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}
    />
  );
}

In a List

Display multiple avatars

import { Avatar } from '@aryankarma/simple-avatar-generator';

function UserList({ users }) {
  return (
    <div className="flex gap-4">
      {users.map(user => (
        <Avatar 
          key={user.email}
          email={user.email}
          size={50}
          className="rounded-full"
        />
      ))}
    </div>
  );
}

Utility Functions

Use utility functions for custom implementations

import { 
  generateAvatarSVG, 
  generateAvatarDataURL 
} from '@aryankarma/simple-avatar-generator';

// Get SVG string
const svg = generateAvatarSVG('user@example.com', 200);

// Get data URL
const dataUrl = generateAvatarDataURL('user@example.com', 200);

// Use in custom component
<img src={dataUrl} alt="Avatar" />

Try It Out

API Reference

Avatar Component Props

Prop	Type	Default	Description
email	string	-	Email address (required)
size	number	200	Avatar size in pixels
className	string	''	CSS class name
style	CSSProperties		Inline styles

Example Avatars

Unique Designs

Deterministic

Easy to Use