astro-ui-avatars
v1.0.0
Published
Generate customizable user avatars with initials from names
Maintainers
mhdcodesReadme
🧔 Astro UI Avatars
This Astro package provides a component to generate user avatars with initials from names.
📦 Installation
Install using pnpm:
pnpm add astro-ui-avatarsOr using npm:
npm install astro-ui-avatarsOr using yarn:
yarn add astro-ui-avatars🥑 Usage
To generate a user avatar in any of your Astro pages or components, import the Avatar component from astro-ui-avatars and use it inside your HTML:
---
import { Avatar } from 'astro-ui-avatars';
---
<html lang="en">
<body>
<p>User Avatar:</p>
<Avatar name="John Doe" />
</body>
</html>🎨 Examples
- Generate an avatar with default settings
<Avatar name="John Doe" />- Generate a blue avatar
<Avatar background="#0D8ABC" color="#fff" />- Generate a random background avatar
<Avatar background="random" />- Generate a rounded avatar
<Avatar rounded={true} />📖 API Reference
| Name | Required | Default | Description |
| :----------- | :------: | :--------- | :-------------------------------------------------------------- |
| name | false | John Doe | The name used to generate initials. |
| size | false | 64 | The size of the avatar in pixels. |
| background | false | #007bff | The background color of the avatar. |
| color | false | #FFFFFF | The text color of the avatar. |
| length | false | 2 | The number of initials to display. |
| fontSize | false | 0.5 | The font size of the initials in percentage. Between 0.1 and 1. |
| rounded | false | true | Whether the avatar should have rounded corners. |
| uppercase | false | true | Whether the initials should be in uppercase. |
| bold | false | true | Whether the initials should be bold. |
All Avatar props are optional. If no props are provided, the avatar will use default settings.
Note
We have also setup an example repository available here: playground
Changelog
Please see the changelog for more information on recent changes.
Acknowledgements
Astro UI Avatars is heavily inspired by ui-avatars.com. Thanks ❤️