@svelte-put/avatar

@svelte-put/avatar

Svelte Avatar component and utilities for building avatar urls

Table of Contents

Show / hide

• @svelte-put/avatar
  • Table of Contents
  • svelte-put
  • Installation
  • Changelog
  • Usage
  • Documentation

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Installation

npm install -D @svelte-put/avatar

yarn add -D @svelte-put/avatar

pnpm add -D @svelte-put/avatar

Changelog

Usage

Currently, gravatar and UIAvatar are supported. If you find that another avatar server is worth mapping to, please propose through an issue.

Show / hide

<script>
  import Avatar from '@svelte-put/avatar/Avatar.svelte';
  import { gravatar, uiAvatar } from '@svelte-put/avatar';

  const simpleGravatarUrl = gravatar('[e-mail]');
  const complexGravatarUrl = gravatar({
    email: '[e-mail]',
    rating: 'r',
    size: 32,
  });

  const simpleUIAvatarUrl = uiAvatar('John+Doe');
  const complexGravatarUrl = uiAvatar({
    name: 'John+Doe',
    rounded: true,
    length: 3,
    bold: true,
    size: 32,
    format: 'svg',
  });
</script>

<!--
  Multiple resolution strategy can be provided as props.
  If one url does not point to a valid resource, the next will
  be used until all are exhausted and an internal fallback (https://www.gravatar.com/avatar?d=mp) is used instead.

  Resolution flow is shown below:

  src -> gravatar -> uiAvatar -> fallback -> internal fallback
-->

<Avatar
  class="rounded-full"
  src="https://johndoe.com/avatar.png"
  gravatar="[e-mail]"
  uiAvatar="John+Doe"
  fallback="https://johndoe.com/fallback.png"
  size={32}
>
</Avatar>

<Avatar
  src="https://johndoe.com/avatar.png"
  gravatar={{ email: '[e-mail]', rating: 'pg' }}
  uiAvatar={{ name: 'John+Doe', background: '333333', color: 'FFFFFF' }}
  fallback="https://johndoe.com/fallback.png"
  size={32}
>
  <svelte:fragment let:src>
    <img {src} alt="custom" />
  </svelte:fragment>
</Avatar>

Documentation

For detailed documentation, see the extracted API. It is recommended to skim through at least the AvatarProps page so that you know what options are available.