Gatsby使用fontawesome6页面闪动问题

关于使用 Gatsby 和 fontawesome6 出现的问题，我也简单查了下，比如这个人在 gatsby-plugin-fontawesome-css 仓库中的issues提到Not working with FontAwesome 6。下面也有人自己fork了项目，进行改进，但实际上我经过简单的研究发现，并不需要这么复杂。

原因及现象

首先 fontawesome6 只是一个图标库，他可以被集成到各类不同框架的项目中，我这里主要介绍的场景是基于Gatsby(React)项目。

在fontawesome6版本发布之前，其实直接用上面提到的插件 gatsby-plugin-fontawesome-css 即可。而现在这个插件已经无法兼容 fontawesome6 。我们就要直接找出造成问题的原因，通过阅读文档，可以找到默认的 fontawesome-svg-core 中的配置项 autoAddCss 为 true ，意味着是页面加载后动态插入style标签包含svg icon的样式到head中，异步创建的样式容易产生各种页面布局的问题，比如这个是图标默认没有样式时，显示非常的大，然后js生成的style样式后出来触发图标变小，造成页面的闪动问题。

解决方案

明白原因后，我们完全可以通过关闭这个配置，设置成false，不要动态生成样式，它就不会闪动了，当然也出现一个巨大的图标。这样，我们就可以自己去写一个初始化的样式在页面中，直接参照原来动态生成的这段代码：

.svg-inline--fa {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

文章末尾提供另一个简单粗暴的相对合适的方案。

注意事项

这样闪动的问题就解决了，但是可能会有一些不完善的地方。比如，之前你在项目中使用了一些属性样式，例如： fa-2xs 、 fa-fw 、 fa-rotate-90 、 fa-beat ...

这该怎么办，其实回到之前说的插件，他其实就是在构建页面的时候将所有的这些样式全部放在共用样式文件了，假如你没有用到这些特殊的属性样式，那就都是冗余样式。其实我也在考虑开发一个新的基于Gatsby的fontawesome6的插件，我都想好了，支持 tree-shaking 最好，在构建过程中自动检测 fa- 前缀（默认）的类名进行样式生成。我想后面估计也会有人去做。如果上面的简易方案实在不行，你可能就需要手动提取这部分样式放入自己创建的css文件中了。

关于如何在Gatsby项目中修改fontawesome6的那个 autoAddCss 配置，我自己是写了一个icon组件，也是为了方便继承之前直接用fontawesome是的升级改造，部分代码在上面提到的issues中有写，这里不再复述，查看我的解决方案。

简单粗暴的方案

不过后来我去研究了下 @fortawesome/fontawesome-svg-core 源码，他的操作是相当简单的，他直接将600多行基础css样式完整的注入到页面中，如果真的要开发一个在Gatsby构建过程中生成css的插件，对我目前来说还是要大量时间，我就不处理了。那么，这个简单粗暴的方式就是在你的Gatsby项目中的 gatsby-browser.js 文件，增加一条：

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

一切就ok了。这样也不需要考虑自己搞定制的fontawesome组件，直接正常使用就好了。后来想了想，600多行css压缩下，其实也还好，先就这样吧。