@svelte-put/avatar GitHub

component & utilities for building avatars

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

Installation

terminal

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 = '';
</script>

<Avatar
  src="https://your.api/avatar/{id}"
  gravatar={email}
  uiAvatar="{firstName}+{lastName}"
  fallback="https://your.api/avatar/default"
/>

Usage

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

Gravatar

Support for Gravatar is available through:

  1. Avatar component with the gravatar prop: or ,
  2. with the src prop.
vnphanquang@gmail.com

Gravatar

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.
Eddie+Munson

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.

nancy.wheeler@domain.com

Multiple sources

Customization

Markup

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.

billy.hargrove@domain.com

Overriding default slot

Styling

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 .
Jim+Hopper

Custom styles

avatar?

Happy bending! 👨‍💻

Edit this page on GitHub