Angular

npm install @grasco/profile-picture

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@grasco/profile-picture/standalone';
import { setCdnBaseUrl } from '@grasco/profile-picture';

@Component({
  selector: 'app-avatar',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <profile-picture
      [attr.src]="avatarUrl"
      [attr.alt]="userName"
      size="xl"
      variant="circle"
      (load)="onLoad()"
      (error)="onError()"
    ></profile-picture>
  `,
})
export class AvatarComponent {
  avatarUrl = 'https://example.com/avatar.png';
  userName = 'Kerry Nicholson';

  ngOnInit() {
    setCdnBaseUrl('https://api.grasco.dev');
  }

  onLoad() { console.log('loaded'); }
  onError() { console.log('error'); }
}

import type { Size, Variant, PresenceStatus } from '@grasco/profile-picture';