FontAwesome 5.0 wrapper component for a default prefix

app.js

import Vue from 'vue';
import {default as fa} from 'fontawesome.vue';

(function(window) {
  "use strict";

  // register our custom FontAwesome component globally
  Vue.component('fa', fa);

  new Vue({
    el           : "#app",
    template     : '<layout></layout>',
    data         : {}
  })
})(window);

fontawesome.vue

<template>
  <fa-icon :icon="[prefix, icon]"></fa-icon>
</template>

<script>

  import {library} from '@fortawesome/fontawesome-svg-core';
  import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';

  // using 'light' as default style
  const defaultIcon = 'fal';

  // we need to import all styles manually from their packages. 
  // ATTENTION: you won't find `faCoffee` in `pro-solid-svg-icons`
  // have a look at the filters to the left: https://fontawesome.com/icons?d=gallery&q=coffee&s=light,regular,solid
  
  import {faCoffee as coffeeSolid} from '@fortawesome/free-solid-svg-icons';
  import {faCoffee as coffeeRegular} from '@fortawesome/pro-regular-svg-icons';
  import {faCoffee as coffeeLight} from '@fortawesome/pro-light-svg-icons';

  library.add(
    coffeeSolid,
    coffeeRegular,
    coffeeLight
  );

  export default {
    props      : {
      icon   : {
        type : String, required : true
      },
      prefix : {
        type : String, required : false, default : defaultIcon
      }
    },
    name       : "fa",
    components : {
      'fa-icon' : FontAwesomeIcon
    }
  };

</script>

index.vue

<template>
  <div>
    <fa icon="coffee"></fa>                 <!-- shows 'light' as this is set as default -->
    <fa icon="coffee" prefix="fas"></fa>    <!-- shows 'solid' -->
    <fa icon="coffee" prefix="far"></fa>    <!-- shows 'regular' -->
  </div>
</template>

<script>
  export default {
    name : "index"
  };
</script>