pinafore/routes/_components/ExternalLink.html

<a rel="nofollow noopener"
   target="_blank"
   :href
   aria-label={{ariaLabel}}
   class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
  <slot></slot>{{#if showIcon}}
    <svg class="external-link-svg">
      <use xlink:href="#fa-external-link" />
    </svg>
  {{/if}}</a>
<style>
  .external-link-with-icon {
    display: inline-flex;
    align-items: center;
  }
  .external-link-with-icon .external-link-svg {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    fill: var(--deemphasized-text-color);
  }
  .external-link-with-icon.normal-icon-color .external-link-svg {
    fill: var(--body-text-color);
  }
</style>
<script>
  export default {
    data: () => ({
      className: void 0,
      normalIconColor: false,
      ariaLabel: '',
      showIcon: false
    })
  }
</script>