pinafore/routes/_components/Avatar.html

{{#if error}}
<svg class="{{className}} avatar" aria-hidden="true">
  <use xlink:href="#fa-user" />
</svg>
{{else}}
<img class="{{className}} avatar" aria-hidden="true" alt=""
     src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
{{/if}}
<style>
  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
  }

  svg.avatar {
    fill: var(--deemphasized-text-color);
  }
</style>
<script>
  import { imgLoadError } from '../_utils/events'

  export default {
    events: {
      imgLoadError
    }
  }
</script>