@svelte-put/avatar GitHub

component & utilities for building avatars

@svelte-put/avatar @svelte-put/avatar @svelte-put/avatar @svelte-put/avatar changelog



npm install --save-dev @svelte-put/avatar

Resolution Strategies

@svelte-put/avatar provides several strategies for specifying image source, used in isolation or together to form a chain that will resolve to the first available source.

  • 1

    src prop - highest priority, most helpful when used together with others

  • 2

    gravatar prop - Gravatar

  • 3

    uiAvatar prop - UI Avatar

  • 4

    fallback prop - custom fallback

  • 5

    internal fallback , last resort

For example:

  1. (src) you have a dedicated api & database for avatar,
  2. (gravatar) you also want to automatically fetch avatar from Gravatar with user's email if they have not uploaded their own avatar,
  3. (uiAvatar) you also want to fallback to an UI Avatar with user's initials if their gravatar has not been set up,
  4. (fallback) you provide your own custom fallback (last resort) just in case UI Avatar is out of service all of the sudden.

Resolution Strategies

<script lang="ts">
  import Avatar from '@svelte-put/avatar/Avatar.svelte';

  export let id: string;
  export let email = '';
  export let firstName = '';
  export let lastName = '';



Direct URL

Direct image source can be provided to the src prop. This is not much different than using a plain img, thus more helpful when used in conjunction with one/more solutions listed in the following sections.

Direct URL


Support for Gravatar is available through:

  1. Avatar component with the gravatar prop: or ,
  2. with the src prop.


UI Avatar

Similar to gravatar, support for UI Avatar is available through:

  1. Avatar component with the gravatar prop: or ,
  2. with the src prop.

UI Avatar

Combining Multiple Sources

As mentioned in Resolution Strategies , multiple sources can be provided to form a chain that resolves to the first available image source.


Multiple sources



The Avatar component provides a default slot with all necessary values available with the let directive.

See Resolution Strategies details on how each value is resolved.


Overriding default slot


The Avatar component provides minimal global styles with 0 css specificity. See source code here for all default styles applied to the component.

Since svelte style are component-scoped, customization generally requires global styles and css custom properties. The code example below shows a couple of ways to achieve this.

  • rounded-full class from a global styling system like TailwindCSS ,
  • custom-avatar class with :global modifier,
  • --border-color css variable bound to the color prop, made possible with svelte --style-props .

Custom styles


Happy bending! 👨‍💻

Edit this page on GitHub