Svelte Boring Avatars
Svelte port of Boring Avatars Beam Component
BeamAvatar Component
BeamAvatar is a customizable avatar component for Svelte, inspired by Boring Avatars. It generates unique and consistent avatars based on usernames and custom color palettes.
Installation
# Clone and copy BeamAvatar.svelte into your project
cp BeamAvatar.svelte src/components/
Basic Usage
<script>
import BeamAvatar from './BeamAvatar.svelte';
</script>
<BeamAvatar name="John Doe" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | 'Biricato' | Text used to generate the avatar |
| colors | string[] | ['#fe4365', '#fc9d9a', '#f9cdad', '#c8c8a9', '#83af9b'] | Array of 5 colors used for the avatar |
| size | number | 36 | Size of the avatar in pixels |
| square | boolean | false | Whether to render a square avatar |
| title | string | undefined | Optional title attribute for the SVG |
Examples
Basic Avatar
<BeamAvatar name="John Doe" />
Custom Size
<BeamAvatar
name="John Doe"
size={80}
/>
Custom Colors
<BeamAvatar
name="John Doe"
colors={['#69d2e7', '#a7dbd8', '#e0e4cc', '#f38630', '#fa6900']}
/>
Square Avatar
<BeamAvatar
name="John Doe"
square={true}
/>
With Title
<BeamAvatar
name="John Doe"
title="Avatar for John Doe"
/>
Credits
This component is inspired by Boring Avatars created by Hayk An, Javi Sánchez-Marín, Enric Pallerols and Josep Martins.
The default color palettes are from Nice Color Palettes by Matt DesLauriers.
License
MIT License - Feel free to use this component in your projects.
