Install Font Awesome Pro in a Laravel and VueJS App

This is a little tip for showing anybody using Laravel and the built in VueJS - how to add Font Awesome Pro to your application via npm. I am writng this on the basis that you have already setup your app.

 Get your Font Awesome Pro account token code

First go to the Font Awesome website and login fontawesome.com. Then choose your account services section - fontawesome.com/account/services and scroll down to the 'Tokens & Access Abroad' section and copy your code... Always keep it secret!

Now open the terminal and enter following with your token code. This will install it globally so you can use it with any application on your machine.

npm config set "@fortawesome:registry" https://npm.fontawesome.com/

npm config set "//npm.fontawesome.com/:_authToken" XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

 Install the dependencies

Now select the directory where your Laravel/Vue app is setup.

cd /hosts/www/laravel-vuejs-app

And install all the dependencies required for Font Awesome 5 Pro.

npm install --save-dev @fortawesome/fontawesome-svg-core
npm install --save-dev @fortawesome/free-brands-svg-icons
npm install --save-dev @fortawesome/pro-light-svg-icons
npm install --save-dev @fortawesome/pro-regular-svg-icons
npm install --save-dev @fortawesome/pro-solid-svg-icons
npm install --save-dev @fortawesome/vue-fontawesome

Now go to the resources/assets/js/app.js and add the making sure it's below window.Vue = require('vue');.

// Add Font Awesome 5 pro
import { library }  from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fas } from '@fortawesome/pro-solid-svg-icons';

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

library.add(fab, fal, far, fas);

Vue.component('font-awesome-icon', FontAwesomeIcon);

Also open the one of your .vue files to add an example icon just to see it's working.

<font-awesome-icon :icon="['far', 'address-book']" />
<font-awesome-icon :icon="['fab', 'apple']" />

Now for this example I will build the production version to get a more realistic file size.

npm run production

Now straight away the compiling time goes up and also before you say it... the app.js file size goes up into the MB's because we are bringing in every single icon/svg.

/js/app.js      3.14 MB 
/css/app.css    155 kB

So now lets limit the icons to just the ones we are using, so again back in the resources/assets/js/app.js file.

// Add font awesome 5 pro
import { library }  from '@fortawesome/fontawesome-svg-core';

// Individual Icons
import { faApple } from '@fortawesome/free-brands-svg-icons';
import { faAddressBook } from '@fortawesome/pro-regular-svg-icons';

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

library.add(faAddressBook, faApple);

Vue.component('font-awesome-icon', FontAwesomeIcon);

Now when you run the file size will be back to normal.

npm run production

/js/app.js      395 kB 
/css/app.css    155 kB

I hope this has been helpful.