@avatune/vanilla

Source: packages/vanilla/README.md

Vanilla JavaScript function for rendering avatars from themes.

Installation

npm

npm install @avatune/vanilla

yarn

yarn add @avatune/vanilla

pnpm

pnpm add @avatune/vanilla

bun

bun add @avatune/vanilla

Usage

import { avatar } from '@avatune/vanilla'
import theme from '@avatune/micah-theme/vanilla'

const svgString = avatar({
  theme,
  seed: 'user@example.com',
  size: 200
})

document.getElementById('avatar-container').innerHTML = svgString

API

function avatar(args: AvatarArgs): string

Parameters:

{
  theme: VanillaTheme        // Theme to use for rendering (required)
  seed?: string              // Random seed for avatar generation
  size?: number              // Avatar size in pixels (default: theme size)

  // Part selection (string identifier)
  body?: string
  ears?: string
  eyebrows?: string
  eyes?: string
  hair?: string
  head?: string
  mouth?: string
  noses?: string

  // Part colors (CSS color values)
  bodyColor?: string
  earsColor?: string
  eyebrowsColor?: string
  eyesColor?: string
  hairColor?: string
  headColor?: string
  mouthColor?: string
  nosesColor?: string
}

Returns: SVG string ready for insertion into DOM

Examples

Random avatar with seed:

const svg = avatar({
  theme: nevmstasTheme,
  seed: '521411f1-fab6-4ed5-90bf-2863028bcae6'
})

Specific parts with custom colors:

const svg = avatar({
  theme: nevmstasTheme,
  hair: 'long',
  hairColor: '#ff6b6b',
  eyes: 'happy',
  eyesColor: '#4ecdc4'
})