Can't add brand icons...

Following the docs, this is how I add a couple of icons within my NUXT project.

Package.json:

{
  ...
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-regular-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "@fortawesome/vue-fontawesome": "^0.1.0",
    ...
  }
  ...
}

// nuxt.config.js

export default {
    ...
    plugins: [
        ...
        "~/plugins/font-awesome",
        ...
    ],
    ...
};

// ~/plugins/font-awesome.js

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


// icon imports

// works!
import { faThumbsUp as thumbsUp_SolidIcon } from "@fortawesome/free-solid-svg-icons";
library.add (thumbsUp_SolidIcon);

// THE PROBLEMATIC ICON
import { faFacebookF } from "@fortawesome/free-brands-svg-icons";
library.add (faFacebookF);


// register component
Vue.component("font-awesome-icon", FontAwesomeIcon);

Vue.config.productionTip = false;

And this is how I use the icons:

<font-awesome-icon icon="thumbs-up" />
<font-awesome-icon icon="facebook-f" />

I get this error in the console:

Could not find one or more icon(s) {prefix: "fas", iconName: "facebook-f"} {}

And I can clearly see the facebook icon on the correct path and the prefix inside (whatever this prefix actually means as context) is “fab” not “fas”.

Is it possible that nuxt picks up on the .ts file and compiles (transpiles) that incorrectly instead of getting the js file? Edit: just tried referring to the js files directly… don’t know what’s going on with this.

I can’t believe something that was so simple to use previously, would now involve such issues and frustration…

[nicroto]

Finally figured out what’s going on.

<font-awesome-icon :icon="['fab', 'facebook-f']" />

The boilerplate I need to add 2 icons is larger than starting up an http server…

[claide]

Additionally, you can use integrated sizing from here.

<font-awesome-icon :icon="['fab', 'github-alt']" size="lg" />