React应用中能否通过autoReplaceSvg配置关闭Font Awesome自动转SVG？

• 将fontawesome.config的赋值逻辑放在App组件的函数作用域内部是错误的：这段代码只有App组件执行渲染逻辑时才会触发，而Font Awesome的自动SVG替换操作会在脚本加载完成、DOM首次解析就绪后就自动执行，等代码运行到组件内的配置赋值时，全量的图标替换动作早已完成，配置无法起到拦截作用。
• 无论你使用的是核心包的npm安装版本还是CDN引入版本，自动替换的触发时机都早于React根组件的渲染流程，把配置写在组件内部完全错过了配置生效的窗口。

你需要把配置逻辑移动到主入口文件中、所有Font Awesome包加载完成后、React根组件挂载之前执行，而不是放在App组件内部。
如果你使用的是npm安装的@fortawesome/fontawesome-svg-core核心包，可参考如下配置结构：

// src/index.js 应用主入口文件
// 1. 先引入Font Awesome核心包
import { config } from '@fortawesome/fontawesome-svg-core';
// 2. 第一时间修改配置，关闭自动替换
config.autoReplaceSvg = false;

// 3. 之后再引入其他应用依赖
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 4. 最后执行根组件挂载逻辑
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

注意事项 #

• 如果你使用的是CDN引入的Font Awesome脚本，需要在引入CDN脚本标签之前，在全局作用域声明配置：

  <script>
    window.FontAwesomeConfig = { autoReplaceSvg: false };
  </script>
  <!-- 此处放置你的Font Awesome CDN脚本标签 -->
  

• autoReplaceSvg的可选关闭值为false或者'nest'，默认值为'auto'，会自动扫描DOM中的图标标签完成SVG替换。
• 关闭自动替换后，如果你依然使用原有的CSS类方式书写图标，需要确保已经全局引入了对应的Font Awesome样式文件，否则图标会因为缺少样式定义无法正常显示。

内容的提问来源于stack exchange，提问作者palyxk