pinafore/routes/_components/Avatar.html

{{#if error}}
<svg class="{{computedClass}}" aria-hidden="true">
  <use xlink:href="#fa-user" />
</svg>
{{elseif $autoplayGifs}}
  <img
    class="{{computedClass}}"
    aria-hidden="true"
    alt=""
    src="{{account.avatar}}"
    on:imgLoad="set({loaded: true})"
    on:imgLoadError="set({error: true})" />
{{else}}
  <NonAutoplayImg
    className="{{computedClass}}"
    ariaHidden="true"
    alt=""
    src="{{account.avatar}}"
    staticSrc="{{account.avatar_static}}"
    :isLink
    on:imgLoad="set({loaded: true})"
    on:imgLoadError="set({error: true})"
  />
{{/if}}
<style>
  :global(.avatar) {
    border-radius: 4px;
    background: var(--loading-bg);
  }

  :global(.avatar.loaded) {
    background: none;
  }

  :global(.avatar.size-extra-small) {
    width: 24px;
    height: 24px;
  }

  :global(.avatar.size-small) {
    width: 48px;
    height: 48px;
  }

  :global(.avatar.size-medium) {
    width: 64px;
    height: 64px;
  }

  :global(.avatar.size-big) {
    width: 100px;
    height: 100px;
  }

  @media (max-width: 767px) {
    :global(.avatar.size-big) {
      width: 80px;
      height: 80px;
    }
  }

  svg.avatar {
    fill: var(--deemphasized-text-color);
  }
</style>
<script>
  import { imgLoad, imgLoadError } from '../_utils/events'
  import { store } from '../_store/store'
  import NonAutoplayImg from './NonAutoplayImg.html'
  import { classname } from '../_utils/classname'

  export default {
    events: {
      imgLoad,
      imgLoadError
    },
    store: () => store,
    computed: {
      computedClass: (className, loaded, size) => (classname(
        'avatar',
        className,
        loaded && 'loaded',
        `size-${size}`
      ))
    },
    components: {
      NonAutoplayImg
    }
  }
</script>