How to import individual icons with FontAwesome v6

Question

I have a Laravel web app which uses an NPM/Webpack build process, and currently importing 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 the whole project.

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

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 then 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 added two example icons in my markup like so:

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

Finally I ran npm run dev to rebuild the JS, but both the icons fail to display.

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 any difference.

This seems to be the method suggested by the documentation above, so what am I doing wrong here?

Hashim Aziz · Accepted Answer · 2022-06-11T17:44:14.653

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.

How to import individual icons with FontAwesome v6

1 Answers1

Linked