Font Awesome 5 Pro - Vue.js + Native Script Component

fontawesome.vue

<template>
  <Span  v-bind:class="classes + ' ' + type" v-bind:text="getIcon()" />
</template>

<script>
  /*
    Setup:
    1. Setup CSS and Font in Native Script App like this: 
       https://medium.com/@JCAguilera/fontawesome-5-and-nativescript-22653f2b3bac
       Thanks > Juanky Aguilera
       Basically copy ttf files from font-awesome webfonts folders to your exsiting app/fonts folder
       & add this to your app-common css file
       .far {
        font-family: Font Awesome 5 Free, fa-regular-400;
        font-weight: 400;
       }

      .fab {
        font-family: Font Awesome 5 Brands, fa-brands-400;
        font-weight: 400;
      }

      .fas {
        font-family: Font Awesome 5 Free, fa-solid-900;
        font-weight: 900;
      }
       
    2. Save this file into your vue components.
    
    3. Copy the icons.json that's included with in the zip from Font Awesome under Metadata.
       NOTE: You'll have to remember to update this file when you update Font Awesome in the future.
    
    4. Declare you global Vue compoent in your main.js file like so:
        ...
        import fontawesome from './components/modules/fontawesome.vue'
        Vue.component('icon', fontawesome)
        ...
        
     5. Use it anywhere in your Vue templates like this ('alarm-clock' is the name of the Font Awesome Icon):
     <Label><icon :name="'industry'" /></Label>
     
  */

  const icons = require('../modules/icons.json'); // CONFIGURE this to map to your icons.json file

  export default {
    props: {
      name: {
        // The name of the font icon you want to use (arrow-right, comment-smile, etc.)
        type: String,
        default: 'exclamation-triangle',
      },
      type: {
        // default Font Awesome icon type (far, fas, fab, fal)
        type: String,
        default: 'far',
      },
      // Optional additional classes if you need to add unique styles.
      classes: {
        type: String
      }
    },
    methods: {
      getIcon: function() {
        // Return the character not a string
        return String.fromCharCode(parseInt(icons[this.name].unicode, 16));
      }
    }
  };
</script>