components\LinkBookmark.vue

<!-- We're using Vue Functional components here -->
<template functional>
  <div class="link-bookmark">
    <!-- The above parent div has been added so the parent scoped styles won't leak into this component -->
    <a
      :href="props.href"
      target="_blank"
      class="flex items-center border cursor-pointer rounded-md hover:bg-gray-100 py-2 px-4"
    >
      <div class="decorator">
        <component :is="$options.getIcon(props)" class="h-4 w-auto mr-3" />
      </div>
      <div class="content ">
        <h4 class="text-sm m-0"><slot /></h4>
        <p class="text-xs truncate text-gray-600">
          {{ props.href }}
        </p>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  functional: true,

  props: {
    href: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: null
    }
  },
  getIcon(props) {
    if (props.href.includes('youtube.') || props.href.includes('youtu.')) {
      return 'YoutubeIcon'
    } else {
      return props.icon
    }
  }
}
</script>

<style scoped>
.link-bookmark {
  @apply pt-3;
}
</style>