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>