Skip to content
Avatune Logo Avatune

@avatune/angular

Source: packages/angular/README.md

Angular component for rendering avatars from themes.

Installation

Section titled “Installation”
Terminal window
npm install @avatune/angular

Usage

Section titled “Usage”
import { Component } from "@angular/core";
import { Avatar } from "@avatune/angular";
import theme from "@avatune/nevmstas-theme/angular";


@Component({
  selector: "app-root",
  standalone: true,
  imports: [Avatar],
  template: `
    <avatune-avatar [theme]="theme" seed="user@example.com" [inputSize]="200" />
  `,
})
export class AppComponent {
  theme = theme;
}

Inputs

Section titled “Inputs”
{
  theme: AngularTheme        // Theme to use for rendering (required)
  seed?: string              // Random seed for avatar generation
  inputSize?: number         // Avatar size in pixels (default: theme size)
  avatarClass?: string       // CSS class for SVG container
  avatarStyle?: string       // Inline styles for SVG container


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


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

Note: Angular uses inputSize, avatarClass, and avatarStyle instead of size, class, and style to avoid conflicts with built-in HTML attributes.

Examples

Section titled “Examples”

Random avatar with seed:

<avatune-avatar [theme]="nevmstasTheme" seed="521411f1-fab6-4ed5-90bf-2863028bcae6" />

Specific parts with custom colors:

<avatune-avatar
  [theme]="nevmstasTheme"
  hair="long"
  hairColor="#ff6b6b"
  eyes="happy"
  eyesColor="#4ecdc4"
/>