Font Awesome Webpack Import not rendering Icons - npm

Question

I've tried to follow the documentation on Font Awesome. I have the pro version and have configured NPM for it. I'm using webpack to compile but I'm having issues with it actually rendering. What am I doing wrong?
Here is my app.js
import { library } from '#fortawesome/fontawesome-svg-core'
import { fas } from '#fortawesome/pro-solid-svg-icons'
import { far } from '#fortawesome/pro-regular-svg-icons'
import { fal } from '#fortawesome/pro-light-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
library.add(fas, far, fal, fab);
I just dumped the following FA icons into my index file
<i class="fas fa-question-circle"></i> <!-- solid style of the question circle icon -->
<i class="far fa-question-circle"></i> <!-- regular style of the question circle icon -->
<i class="fal fa-question-circle"></i> <!-- light style of the question circle icon -->
<i class="fab fa-facebook"></i> <!-- facebook brand icon-->
<i class="fab fa-facebook-f"></i> <!-- facebook "f" brand icon-->
It doesn't seem to do anything with the icons and I don't have any errors compiling. What am I doing wrong?

Answer 1

I'm not a Webpack expert by any means, but there's a little more configuration than just a simple import in order to get Font Awesome to work.
Now this may have changed with FA 5, but I would hope this method is still valid.
This post sums it up quite nicely and is pretty much identical to my current configuration:
Webpack 2 and Font-Awesome Icon Importing
The article has the following (in case the link goes dead):
You'll need a few prerequisite items:
npm install webpack file-loader css-loader sass-loader node-sass
--save-dev
And FA, which you probably already have:
npm install font-awesome --save
** Note: your paths may vary from mine **
In my Webpack module rules I setup to drop the FA assets into a fonts directory:
module: {
rules: [{
test: /\.(eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 10000,
name: '[name].[ext]',
outputPath: '/fonts/', // where the fonts will go
publicPath: '/assets' // override the default path
}
}]
Once you have all the configurations set, you need to import FA into your main stylesheet:
$fa-font-path: "~font-awesome/fonts";
#import '~font-awesome/scss/font-awesome.scss';
You should then see the assets being pulled into when you run your Webpack build.

Answer 2

I figured out that loading svg-core was the issue. The expected behavior was for the tags to be automatically replaced. Since I was loading svg-core autoReplaceSvg was disabled.
Using the #fortawesome/fontawesome-svg-core package disables autoReplaceSvg and observeMutations by default.
Font Awesome API -> Configuration