Font-Awesome 添加属性 aria-hidden 以防止图标出现在浏览器中 [SSR]

Question

我想在我的 Next.js 项目中包含一些 Font-Awesome Icons。我已经添加了需要的

<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>

标记到我的头部，然后

<i className="fas fa-arrow-right"></i>

标记到我的渲染方法。如果我在浏览器中打开网站，它会给我这个控制台警告：

index.js:1 警告：来自服务器的额外属性：aria-hidden

和

<i className="fas fa-arrow-right"></i>

切换到

<i className="fas fa-arrow-right" aria-hidden="true"></i>

我已经尝试过 react-fontawesome 包，但这似乎不适用于 SSR。添加

aria-hidden="false"

手动也没有修复它。

我想这是 SSR 的一个问题，但我无法找到一个好的解决方案或替代方案。

Answer 1

我遇到了同样的问题，我通过aria-hidden以这种方式添加到图标来解决：

<i aria-hidden className="fab fa-whatsapp" />

没有更多的警告。