<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>