Svelte

npm install @grasco/profile-picture

declare namespace svelteHTML {
  interface IntrinsicElements {
    'profile-picture': any;
    'profile-picture-group': any;
  }
}

<script>
  import '@grasco/profile-picture/standalone';
  import { setCdnBaseUrl } from '@grasco/profile-picture';
  import { onMount } from 'svelte';

  onMount(() => {
    setCdnBaseUrl('https://api.grasco.dev');
  });
</script>

<profile-picture
  src="https://example.com/avatar.png"
  alt="Kerry Nicholson"
  size="xl"
  variant="circle"
  border="true"
  border-color="white"
  on:load={() => console.log('loaded')}
  on:profile-picture-click={(e) => console.log('clicked', e.detail)}
/>

<profile-picture-group max="4" size="lg" on:avatar-click={(e) => console.log(e.detail.user)}>
  {#each users as user}
    <profile-picture src={user.avatar} alt={user.name} data-user-id={user.id} />
  {/each}
</profile-picture-group>

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