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)$/],
},
]
This issue was solved once I changed the import to import '@fortawesome/fontawesome-free/css/all.css';
and made some adjustments to the config.