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

Question

我正在开发一个 React 应用程序，我想在其中有条件地呈现 FontAwesome 图标，但目前它没有在应该更改的时候更改。

我查了一下elements，发现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 loader 移动到 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'; 并对配置进行了一些调整后，这个问题就解决了。

Answer 2

Font Awesome 配置为此提供了属性！ https://fontawesome.com/v6/docs/apis/javascript/configuration#keeporiginalsource

keepOriginalSource（默认值：true）：如果替换为内联 SVG，请保留 HTML 注释 <-- --> 与原始标记。

您可以通过多种方式调整选项。

从浏览器设置配置 API:

window.FontAwesome.config.keepOriginalSource = false;

从 svg 核心包设置配置：

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

使用脚本标签设置配置：

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

设置将与默认 Font Awesome 配置合并的配置对象：

FontAwesomeConfig = {
  keepOriginalSource: false
}

所有可用的 Font Awesome js 配置选项列表以及如何配置它们： https://fontawesome.com/v6/docs/apis/javascript/configuration

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

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

javascript

reactjs

webpack

font-awesome

mini-css-extract-plugin