页面呈现时如何将图标更新为旋转加载项？

Question

我有一个reactjs应用程序，当页面呈现时，我试图将该图标更改为旋转图标。实际上，我没有这方面的代码，也不知道从哪里开始。

我的目标是使浏览器选项卡中的图标在呈现时更改为旋转加载图标。

Answer 1

备选方案1- 反应头盔

您可以在呈现过程中在文档的头中定义标记，包括偏袒图标。

const App = () => (
    <Helmet>
        <link rel="shortcut icon" type="image/x-icon" href="you-swirling-icon.png">
    </Helmet>
)

选项2-更改具有副作用的href属性

这里是使用钩子完成的，如果使用类组件，则可以在componentDidMount中进行同样的操作

const App = () => {
    useEffect(() => {
        const favicon = document.getElementById('my-favicon')
        favicon = setAttribute('href', 'you-swirling-icon.png')
    }, [])

    return <div>Whatever is in your app</div>
}