Avatarium

Avatarium Website

Meet Avatarium, your new favorite React package! This nifty tool is here to help you whip up awesome avatars on the fly. Our Avatar component makes it easy for you to give users an identity, without having to go through the trouble of profile picture uploads which need storage, monitoring, and constraints. Use an avatar on:

• User profile pictures
• Comment sections
• Chat Interfaces
• Contact Lists
• And so much more!

Key Features:

• Theme Customization: Users can select from predefined themes like 'space', 'blob', 'emoji', 'monster', and 'user'.
• Styling Options: Three predefined styles can be applied to the avatars, enhancing their visual appearance.
• Seed Functionality: Allows for deterministic results when a seed is provided and non-deterministic results when no seed is used.

Installation

Install the component using NPM:

npm install @sabfry/avatarium

Usage

1. Import Avatar

import Avatar from '@sabfry/avatarium';

2. Use component in your project

<Avatar theme='blob' seed={userId} />

3. Examples

<Avatar theme='blob' seed={userId} />
<Avatar theme='space' style='style1' />
<Avatar theme='emoji' seed='style3' />
<Avatar theme='user' size='sm' border={true} />
<Avatar theme='blob' size='xl' border={true} borderShape='circle' borderColor='blue'/>

Options

| Attribute | Options | Default | Description |
|---|---|---|---| | theme | string | none | blob, emoji, monster, space, user, cutie |
| size | string | sm | xs, sm, med, lg, xl | | border | boolean | false | if there's a border around the avatar |
| borderShape | string | square | cirlce, rounded, square. Note: won't do anything if border is false |
| borderColor | string | black | color name, hex, or rgb. Note: won't do anything if border is false |
| backgroundColor | string | black | color name, hex, or rgb. | | styleType | string | none | style1, style2, style3. Predefined styles. Other props won't affect the avatar if a style is chosen. |
| seed | number | random | You can add a number so that the avatar is deterministic. If left blank then the avatar will be random. |

Style Examples

Style 1

Style 2

Style 3

Unstyled

In Use

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Contributions

https://www.flaticon.com/packs/smiley-and-people-10 https://www.flaticon.com/packs/people-5 https://www.flaticon.com/packs/science-fiction-avatars-2 https://www.flaticon.com/packs/emoticon-29 https://www.flaticon.com/packs/monsters-2