Estoy trabajando en una aplicación React donde quiero una representación condicional de los íconos de FontAwesome, pero por el momento no está cambiando cuando debería.

Inspeccioné los elementos y descubrí que FontAwesome está comentando el componente React y reemplazándolo con el svg del ícono, por lo que cuando vuelvo a cambiar el ícono de FontAwesome en React, no tiene ningún efecto. A continuación se muestra un ejemplo de esto

 <!-- 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 -->

Sé que la causa de esto probablemente tenga que ver con un cambio de paquete web que hice recientemente (moví el cargador menos a webpack.rules.js en lugar de agregarlo en webpack.renderer.config.js y cambié style-loader a MiniCssExtractPlugin.loader ), pero no estoy seguro de qué es exactamente lo que lo está causando o cómo solucionarlo. He incluido la importación de fontawesome y el paquete web a continuación:

 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)$/], }, ]