Package Exports

@simplr-sh/avatar
@simplr-sh/avatar/dist/index.cjs
@simplr-sh/avatar/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@simplr-sh/avatar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@simplr-sh/avatar

A TypeScript library for generating beautiful gradient-based avatars with customizable text overlays.

Example Images

Installation

# Using bun
bun i @simplr-sh/avatar

# Using NPM
npm i @simplr-sh/avatar

# Using Yarn
yarn add @simplr-sh/avatar

Features

Generate gradient-based avatars
Customizable size and border radius
Text overlay support
Full TypeScript support
Returns Base64 SVG data URI

API Reference

getAvatar(options)

Generate an avatar with a gradient background and text overlay.

Options:

name (string): Name used to generate the gradient
text (string): Text to display on the avatar
size (number, optional): Size of the avatar in pixels (default: 128)
rounded (number, optional): Border radius of the avatar (default: 0)

Returns a Promise that resolves to a Base64 SVG data URI.

Usage

Vanilla JavaScript

import { getAvatar } from '@simplr-sh/avatar'

// Generate a simple avatar
const avatar = await getAvatar({
  name: 'John Doe',
  text: 'JD',
  size: 128,
  rounded: 16,
})

// Use in HTML
const img = document.createElement('img')
img.src = avatar
document.body.appendChild(img)

React

import { useEffect, useState } from 'react'
import { getAvatar } from '@simplr-sh/avatar'

function Avatar({ name, text, size = 128, rounded = 16 }) {
  const [avatarSrc, setAvatarSrc] = useState<string>('')

  useEffect(() => {
    getAvatar({ name, text, size, rounded })
      .then(setAvatarSrc)
      .catch(console.error)
  }, [name, text, size, rounded])

  return <img src={avatarSrc} alt={`Avatar for ${name}`} />
}

// Usage
function App() {
  return <Avatar name="John Doe" text="JD" />
}

Attribution

This package is inspired by and contains code adapted from Vercel's Avatar repository. We're grateful to Vercel for their original work on avatar generation.

Development

bun install
bun run index.ts

This project was created using bun init in bun v1.1.42.