Font Awesome commenting out <i></i> tag after parsing

Question

I'm working on a React application where I want conditional rendering of FontAwesome icons, but at the moment it's not changing when it should.

I inspected elements and found that FontAwesome is commenting out the React component and replacing it with the svg of the icon, so when I go back to change the FontAwesome icon in React, it has no effect. Below is an example of this

<!-- Expected -->
<i class="fa fa-pause"></i>

<!-- Actual -->
<svg class="svg-inline--fa fa-pause fa-w-14" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="pause" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg>...</svg>
<!-- <i class="fa fa-pause"></i> Font Awesome fontawesome.com -->

I know the cause of this probably has to do with a webpack change I recently made (moved the less loader into the webpack.rules.js instead of adding it in webpack.renderer.config.js and changed style-loader to MiniCssExtractPlugin.loader), but I'm not sure what exactly is causing it or how to fix it. I've included the fontawesome import and webpack below:

import '@fortawesome/fontawesome-free/js/all.js';

// webpack.rules.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = [
  {
    test: /\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: {amd: false},
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
  {
    test: /\.less$/,
    use: [MiniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'less-loader'}],
    exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(config|variables|overrides)$/],
  },
]

Answer 1

This issue was solved once I changed the import to import '@fortawesome/fontawesome-free/css/all.css'; and made some adjustments to the config.

Answer 2

The Font Awesome config has a property for this! https://fontawesome.com/v6/docs/apis/javascript/configuration#keeporiginalsource

keepOriginalSource (default: true): If replacing with inline SVG keep an HTML comment <-- --> with the original markup.

There are a few ways you can tweak the options.

Setting config from browser API:

window.FontAwesome.config.keepOriginalSource = false;

Setting config from svg core package:

import { config } from '@fortawesome/fontawesome-svg-core';
config.keepOriginalSource = false;

Setting config using script tag:

<script src="https://your-site-or-cdn.com/fontawesome/v6.1.1/js/all.js" data-keep-original-source ="false"></script>

Setting config object that will merge with default Font Awesome config:

FontAwesomeConfig = {
  keepOriginalSource: false
}

List of all available Font Awesome js configuration options and how to configure them: https://fontawesome.com/v6/docs/apis/javascript/configuration