Skip to content

Latest commit

 

History

History

astro-ui-avatars

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
tsup.config.ts
tsup.config.ts
 
 

README.md

🧔 Astro UI Avatars

Astro UI Avatars banner

version downloads github actions typescript makepr

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