Astro-ui-avatars NPM

🧔 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-avatars

Or using npm:

npm install astro-ui-avatars

Or 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 ❤️

astro astro-component astro-ui-avatars ui avatar ui-avatars user-avatars

0.0.3

6 months ago

0.0.2

6 months ago

0.0.1

6 months ago