vue.jsでリンク先の拡張子でFont Awesome Iconが変わるあいつをつくってみた

<template>
  <a :href="href">
    <font-awesome-icon
      :icon="faIcon(href)"
      :class="`text-` + faIconColor()"
      fixed-width
    /><slot v-slot="text">{{ text.label }}</slot>
  </a>
</template>
<script>
import geticonForExtension from "font-awesome-filetypes";
export default {
  name: "href",
  props: {
    label: {
      type: String,
      default: "リンク"
    },
    href: String
  },
  methods: {
    isExternalLink(path) {
      //外部リンクかどうか
      return /^https?:\/\//.test(path);
    },
    faIcon(path) {
      if (path) {
        //外部リンクの場合は"external-link-alt"
        if (this.isExternalLink(path)) {
          return "external-link-alt";
        } //それ以外は拡張子によってアイコンを変更
        return geticonForExtension(path.split(".").pop()).slice(3);
      }//拡張子が判別できない場合は"file"
      return "file";
    },
    faIconColor() {
      //アイコンごとに色を変更、BootstrapVueを使用しています
      const faIcon = this.faIcon(this.href);
      if (faIcon === `external-link-alt` || faIcon === `file-word`) {
        return `info`;
      } else if (faIcon === `file-powerpoint`) {
        return `warning`;
      } else if (faIcon === `file-excel`) {
        return `success`;
      } else if (faIcon === `file-video` || faIcon === `file-pdf`) {
        return `danger`;
      } else if (!this.href) {
        return `muted`;
      } else return `primary`;
    }
  }
};
</script>