How to import individual icons with FontAwesome v6

Question

In my web app built on Laravel, which under the hood uses an npm/Webpack build process, I'm currently using the SCSS icon sheet versions of FontAwesome like this:

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands'; 

This is more lightweight than the default setup of loading every single FontAwesome icon, but still results in loading thousands of icons when I'm using less than 20 throughout my project.

I therefore want to move to importing individual icons, as documented here in the docs .

I uninstalled the old package and installed those that seem to be required by the link above:

npm uninstall @fortawesome/fontawesome-free
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons

I added the following to my project's bootstrap.js (where all the other external imports live):

import { library } from "@fortawesome/fontawesome-svg-core";
import { faMugHot } from "@fortawesome/free-solid-svg-icons";
import { faBolt } from "@fortawesome/free-solid-svg-icons";
library.add(faMugHot, faBolt);

And finally ran npm run dev to rebuild the JS, but both of the two example icons that I'm loading fail to display.

I'm referencing the icons in my markup like so:

<i class="fas fa-mug-hot"></i>
<i class="fas fa-bolt"></i>

I've also tried enabling the options that are disabled by default when using the SVG Core package:

import { config } from "@fortawesome/fontawesome-svg-core";
config.autoReplaceSvg = true;
config.observeMutations = true;
import { library } from "@fortawesome/fontawesome-svg-core";
import { faMugHot } from "@fortawesome/free-solid-svg-icons";
import { faBolt } from "@fortawesome/free-solid-svg-icons";
library.add(faMugHot, faBolt); 

...but this doesn't make the icons load either.

This seems to be the method suggested by the documentation here, so why isn't it working for me? What am I doing wrong here?

Answer 1

I was on the right track with the packages I installed and the HTML markup - unfortunately for some reason my JavaScript wasn't working despite being stolen directly from the docs. Here's what I got working instead, adapted from yet another section of the docs.

import { library, dom, config } from "@fortawesome/fontawesome-svg-core";
config.searchPseudoElements = true; 
// Optional setting to replace FontAwesome icons 
// in CSS pseudoselectors with SVG equivalents

import {
    faMagnifyingGlass,
    faLock,
    faCheck
} from "@fortawesome/free-solid-svg-icons";

library.add(
    faMagnifyingGlass,
    faLock,
    faCheck
);

// Replace any existing <i> tags with <svg> and set up a MutationObserver to
// continue doing this as the DOM changes.
dom.i2svg();
dom.watch();

Instead of loading thousands of extra icons, this solution now only loads and build the three specified icons.

Note that importing the config object is optional, and only needed if you want to modify the config as shown above.