Pinafore-Web-Client-Frontend/routes/_components/ExternalLink.html

<a rel="nofollow noopener"
   target="_blank"
   href="{{href}}"
   class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
  <slot></slot>{{#if showIcon}}
    <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 svg {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    fill: var(--deemphasized-text-color);
  }
  .external-link-with-icon.normal-icon-color svg {
    fill: var(--body-text-color);
  }
</style>
<script>
  export default {
    oncreate() {
      this.set({className: this.get('class')}) // workaround for "class" property name bug in svelte
    }
  }
</script>