useFavicon

Set the page favicon.

Import


import { useFavicon } from '@tidbcloud/uikit'

Usage

useFavicon appends a <link /> element to the head with the given favicon. The hook is not called during server side rendering.


import { useFavicon } from '@tidbcloud/uikit'
 
function Demo() {
  useFavicon('/favicon.ico')
 
  return <div>Page with custom favicon</div>
}

Dynamic Favicon


import { useState } from 'react'
import { useFavicon } from '@tidbcloud/uikit'
import { Button, Group } from '@tidbcloud/uikit'
 
function Demo() {
  const [favicon, setFavicon] = useState('/default.ico')
  useFavicon(favicon)
 
  return (
    <Group>
      <Button onClick={() => setFavicon('/success.ico')}>Success</Button>
      <Button onClick={() => setFavicon('/error.ico')}>Error</Button>
    </Group>
  )
}

Supported Formats

.ico
.png
.svg
.gif

Definition


function useFavicon(url: string): void