Font Awesome添加了隐藏的属性aria，防止图标出现在浏览器[SSR]中

Question

我想在我的Next.js项目中包含一些字体很棒的图标。我已经添加了所需的

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

标签到我的头，然后

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

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

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

和

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

切换到

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

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

aria-hidden="false"

手动也没有修复。

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

Answer 1

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

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

没有更多警告。