useFavicon

作用

用于设置页面的 favicon。

原理

通过 useEffect 监听 favicon 的变化，当 favicon 变化时，更新 document.head。

源码

import { useEffect } from 'react'

const ImgTypeMap = {
  SVG: 'image/svg+xml',
  ICO: 'image/x-icon',
  GIF: 'image/gif',
  PNG: 'image/png',
}

type ImgTypes = keyof typeof ImgTypeMap

const useFavicon = (href: string) => {
  useEffect(() => {
    // 如果没有 href，直接返回
    if (!href) return

    // 获取 href 的后缀
    const cutUrl = href.split('.')
    const imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase() as ImgTypes

    const link: HTMLLinkElement =
      document.querySelector("link[rel*='icon']") || document.createElement('link')

    // 设置 link 的属性
    link.type = ImgTypeMap[imgSuffix]
    // 设置 link 的href
    link.href = href
    // 设置 link 的rel
    link.rel = 'shortcut icon'

    document.getElementsByTagName('head')[0].appendChild(link)
  }, [href])
}

export default useFavicon