@gayath1/ng-avatar-creator

Angular library that renders deterministic SVG avatars from a name seed. Includes optional inline customization (style, color, shape) when editable is enabled.

Requirements: Angular ^15.

Install

npm install @gayath1/ng-avatar-creator

Peer dependencies (your app should already have these):

• @angular/common ^15.0.0
• @angular/core ^15.0.0

Usage

Import the module in a feature or root module:

import { NgAvatarCreatorModule } from '@gayath1/ng-avatar-creator';

@NgModule({
  imports: [NgAvatarCreatorModule],
})
export class AppModule {}

Use the component in a template:

<lib-ng-avatar-creator
  [firstName]="'Ada'"
  [lastName]="'Lovelace'"
  [size]="80"
  [editable]="true"
  editorTitle="Edit avatar"
  [avatarConfig]="config"
  (avatarConfigChanged)="onAvatarChange($event)"
></lib-ng-avatar-creator>

import { AvatarConfig } from '@gayath1/ng-avatar-creator';

config: AvatarConfig = {
  style: 'initials',
  seed: 'Ada Lovelace',
  bgColor: '#3b82f6',
  shape: 'circle',
};

onAvatarChange(config: AvatarConfig) {
  this.config = { ...config };
}

Inputs

| Input | Type | Default | Description | |--------|------|---------|-------------| | firstName | string | '' | Used with lastName to derive the default seed when avatarConfig is not set. | | lastName | string | '' | Same as firstName. | | size | number | 64 | Display size of the avatar (pixels). | | editable | boolean | false | When true, users can open an editor to change style, color, and shape. | | editorTitle | string | 'Customize Avatar' | Title shown in the editor UI. | | avatarConfig | AvatarConfig | (optional) | Full configuration; merges with internal defaults. |

Outputs

| Output | Type | Description | |--------|------|-------------| | avatarConfigChanged | EventEmitter<AvatarConfig> | Emits whenever the effective config changes (including on init). |

AvatarConfig

interface AvatarConfig {
  style: AvatarStyleId;
  seed: string;
  bgColor: string;
  shape: 'circle' | 'square';
}

AvatarStyleId: initials, identicon, rings, shapes, thumbs, avataaars, bottts, glass.

Constants AVATAR_STYLES and PREDEFINED_COLORS are exported if you want to build your own UI.

Selector

• Selector: lib-ng-avatar-creator

Avatars are generated as inline SVG (data URLs); no external image host is required.

Public API

• NgAvatarCreatorModule
• NgAvatarCreatorComponent
• NgAvatarCreatorService (placeholder for future extension)
• AvatarConfig, AvatarStyleId, AvatarStyleOption
• AVATAR_STYLES, PREDEFINED_COLORS

Repository

Source and issues: github.com/gayathchandula/ng-avatar

License

MIT