Username-Based SVG Avatars for Svelte

BeamAvatar is a Svelte component for generating unique, custom, SVG-based user avatars. Inspired by the Boring Avatars library, it creates visually consistent avatars based on a given name and a predefined color palette.

You can use BeamAvatar to generate consistent avatars for user profiles or even for anonymous users, based on dynamic data inputs. The same username generates identical patterns, maintaining consistency across sessions and platforms.

GitHub Repo

Live Demo

Features

🎨 Customizable Colors: Control the avatar’s appearance with a flexible array of five distinct colors.

📏 Adjustable Size: Easily modify the avatar’s dimensions to fit various layouts within your application.

🔳 Square Option: Choose between circular or square avatar shapes to match your design preferences.

✏️ Name-Based Generation: Generate unique avatars using a simple string as input, typically a username.

🏷️ Accessible Titles: Add an optional title attribute to the SVG for improved accessibility.

Use Cases

User Profile Displays: Enhance user profiles by displaying a unique avatar for each user.
Comment Sections: In forum or blog comment sections, BeamAvatar can provide a visual cue for each commenter to make discussions easier to follow.
Admin Dashboards: For applications with multiple users, like admin dashboards, these avatars can help quickly distinguish between different accounts.
Chat Applications: Displaying consistent avatars next to user messages in a chat application helps users identify participants at a glance.
Placeholder Images: When user-provided profile pictures are unavailable, BeamAvatar serves as an effective and visually appealing fallback.

Installation

1. Clone the repo from Github and copy the BeamAvatar.svelte file into your project directory:

cp BeamAvatar.svelte src/components/

2. Import and use the component in your Svelte files to begin generating avatars.

<script>
 import BeamAvatar from './BeamAvatar.svelte';
</script>
<BeamAvatar name="jQuery Script" />

Customization

1. You can modify the avatar size to fit different UI layouts:

<BeamAvatar name="jQuery Script" size={80} />

2. Set a custom color palette for the avatar to match your design scheme:

<BeamAvatar name="jQuery Script" colors={['#69d2e7', '#a7dbd8', '#e0e4cc', '#f38630', '#fa6900']} />

3. If you prefer a square avatar instead of a round one, you can set the square prop:

<BeamAvatar name="jQuery Script" square={true} />

4. Define a unique title for the SVG.

<BeamAvatar name="jQuery Script" title="jQuery Script" />

FAQs

Q: What determines the avatar’s appearance?
A: The name prop you provide is used to generate a unique pattern and color combination based on its characters. The colors prop allows you to customize the color palette used.

Q: Can I use more or fewer than five colors?
A: BeamAvatar is designed to work with an array of exactly five colors. Providing a different number of colors might lead to unexpected results.

Q: Will the avatar pattern change if I update the component?
A: No, the pattern remains consistent for each username unless you modify the colors or other properties.