2021-03-16

Creating an external anchor component

This pages describes how I create a fancy

<a />
element which opens the given
URL
in a new browser tab and is followed by an icon hinting that the link navigates to an off-site location.

Even though this component does’t do much by itself, getting started with something this simple allows me to dive a bit deeper into technologies like

Svelte
,
NPM
, and
CSS
.

Description

I wanted a component that would:

  • Be as close to easy to use as a normal
    <a />
    element.
  • Display an icon to denoted is an external link so that you know you’re leaving the site.
  • Open the link in another browser. I’m always taken out of the flow if I click a link and I lose my place in the article.

External Anchor (Text and Icon)

Using this:

<EA text="Svelte" href="https://svelte.dev" />

generates this:

    

Svelte

External Anchor (Icon Only)

Using this:

<EA href="https://svelte.dev" />

generates this:

    

The reason why I wanted to include the icon only view will be for a future article.

Building the component

This is a very simple

Svelte
componenent. I’ll display this entire component in one code block, then explain the individual parts afterwards.

<script lang="ts">
  import FaExternalLinkAlt from "$lib/components/icons/ExternalLinkAlt.svelte";
  export let text: string;
  export let href: string;
</script>

<a {href} target="_blank">
  {#if text}
    {text} 
  {/if}
  <div class="icon"><FaExternalLinkAlt /></div>
</a>

<style>
  a {
      text-decoration-color: none;
      text-decoration-line: none;
      text-decoration-style: none;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: lightgray;
  }

  a:hover {
      cursor: pointer;
      border-bottom-width: 2px;
  }

  .icon {
      display: inline-block;
      color: darkgrey;
      width: 1rem;
      height: 1rem;
      transform: translateY(0.05em);
  }
</style>

The script section

Svelte
components contain a
Svelte script
section similar to the following: 
<script lang="ts">
    import FaExternalLinkAlt from "$lib/components/icons/ExternalLinkAlt.svelte";
    export let text: string;
    export let url: string;
</script>

The lang="ts" describes that this component uses the

TS
language.

The import FaExternalLinkAlt from "$lib/components/icons/ExternalLinkAlt.svelte"; imports the FaExternalLinkAlt icon from the

NPM svelte-icons module
.

The export let text: string and export let url: string; describe the component properties (input arguments). The text argument is the

<a />
element’s inner text, and the url argument is the value for the
<a />
element’s href attribute.

The markup section

All

Svelte
components contain the markup section which is the actual contents of the component:

<a {href} target="_blank">
  {#if text}
    {text} 
  {/if}
  <div class="icon"><FaExternalLinkAlt /></div>
</a>

The <a {href} target="_blank"> assigns the href component input property to the

<a />
elements href attribute value.

The target="_blank"> sets the target of the

<a />
element to a new browser tab (or window). This will open a new tab (or window) and brose to the
URL
inside that window. Leaving the current window unmodifed.

The {#if text}{text}{/if} inserts the contents of the text input property into the output if the text input property contains a

Truthy
value.

The <div class="icon"><FaExternalLinkAlt /></div> inserts the <FaExternalLinkAlt /> icon and wraps it in a

<div />
element for styling the component via
CSS
(in the next section).

The style section

Svelte
components contain a
Svelte style
section like the following: 
<style>
  a {
      text-decoration-color: none;
      text-decoration-line: none;
      text-decoration-style: none;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: lightgray;
  }

  a:hover {
      cursor: pointer;
      border-bottom-width: 2px;
  }

  .icon {
      display: inline-block;
      color: darkgrey;
      width: 1rem;
      height: 1rem;
      transform: translateY(0.05em);
  }
</style>

Where the

<a />
element’s selector, a {...}, sets the
text-decoration-color
,
text-decoration-line
, and
text-decoration-style
default values to none which removes
<a />
element’s default link color and the underline.

It also sets the

border-bottom-width
,
border-bottom-style
, and
border-bottom-color
create a slighty (I think) fancier underline.

The

<a />
element’s hover selector, a:hover {...}, configures the
<a />
element’s
border-bottom-width
property to a slighty larger size and sets the
cursor
property’s value to pointer. This provides a bit of distinction when the element is under the cursor.

The icon’s custom

CSS
class selector, .icon {...} styles the
<div />
from the markup section of the component.

It sets the The display: inline-block sets the display value to allow the <FaExternalLinkAlt /> to be inline with the normal text flow.

The

color
,
height
, and
width
set a reasonable color and size for the icon.

The transform: translateY(0.05em);

transform
‘s translateY(0.1em) function moves the icon vertically down a bit, which I think aligns icon a bit better wtih the text.

Completed

Now you can just import the component and use it as listed in the examples at this beginning of this article.

© Bounded Infinity 2025