Font Awesome 5 Pro - without NPM

Font Awesome is an excellent icon pack. Good looking icons, and lots of them. I was an early backer for Font Awesome 5. That gives my account access to the Pro version of Font Awesome. But I don't have access to their CDN or NPM repositories to install it so I can use it with Vue Fontawesome.

The solution to this is pretty straight forward - install Font Awesome Pro with local files.

Log in to your Font Awesome account, navigate to the download section. Then scroll down to Pro Package section. Download each of the packages from which you will use icons. I only needed to download the @fortawesome/pro-solid-svg-icons package.

Place the packages somewhere within your code base. I'm using Laravel so I put mine in to resources/@fortawesome folder.

Update your package.json so that the '@fortawesome/pro-solid-svg-icons' package points to the file you download.

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.35",
  "@fortawesome/vue-fontawesome": "^3.0.0-4",
  "@fortawesome/pro-solid-svg-icons" :"file:resources/@fortawesome/fortawesome-pro-solid-svg-icons-5.15.3",    
}

Run npm install.

Follow the documentation for Vue Font Awesome, but pull in icons from the '@fortaweseome/pro-solid-svg-icons' instead of the free package.

Your JS will end up looking something like (not fully tested)...

import { createApp } from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import {
    faCheckCircle,
    faTrash,
} from "../@fortawesome/fortawesome-pro-solid-svg-icons-5.15.3";

library.add(faCheckCircle);
library.add(faTrash);

const el = document.getElementById('app');

const app = createApp();

app.component('font-awesome-icon', FontAwesomeIcon);
app.mount(el);

Pretty straight forward - but took me a minute to figure out because I did not know about the 'file:' option in package.json.

You could even possibly create your own private git repo with the Font Awesome Pro package and point at that. Then you don't have to download files across multiple apps.

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.35",
  "@fortawesome/vue-fontawesome": "^3.0.0-4",
  "@fortawesome/pro-solid-svg-icons" :"git+https://gitlab-or-something.com/PRIVATE-fontawesome-pro-package.git",    
}