Font Awesome 解析后注释掉 <i></i> 标签

Question

我正在开发一个 React 应用程序，我希望有条件地渲染 FontAwesome 图标，但目前它没有改变它应该何时改变。

我检查了元素，发现FontAwesome是在注释掉React组件，用图标的svg代替，所以当我回去改React中的FontAwesome图标时，没有任何效果。下面是一个例子

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

我知道这可能与我最近所做的 webpack 更改有关（将 less 加载器移到 webpack.rules.js 中，而不是将其添加到 webpack.renderer.config.js 中并将 style-loader 更改为 MiniCssExtractPlugin.loader），但是我不确定到底是什么原因造成的或如何解决它。我在下面包含了 fontawesome 导入和 webpack：

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

当我将导入更改为import '@fortawesome/fontawesome-free/css/all.css'; 并对配置进行一些调整后，此问题得到解决。