[RFC] useFavicon Hook (with ICO/SVG/PNG/GIF Support)

[linbudu599]

import { useEffect } from 'react';

// image/vnd.microsoft.icon MIME类型只有当图像真的是ICO文件时才会起作用
// image/x-icon 会同时也适用于位图与GIF
// 主要是为了兼容扩展名为ico的非ico文件
const ImgTypeMap = {
  SVG: 'image/svg+xml',
  ICO: 'image/x-icon',
  GIF: 'image/gif',
  PNG: 'image/png'
};

type ImgTypes = keyof typeof ImgTypeMap;

const useFavicon = (favUrl: string): void => {
  const cutUrl = favUrl.split('.');
  const imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase() as ImgTypes;

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

    link.type = ImgTypeMap[imgSuffix];
    link.href = favUrl;
    // 大部分浏览器只会识别icon 只有IE会识别整个名称
    link.rel = 'shortcut icon';

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

export default useFavicon;

[awmleer]

可以参考下 React Helmet～

[linbudu599]

我理解是 命令式的useFavicon 在切换页面时实现favicon随着切换更友好些233 而且通常来说useTitle + useFavicon就能满足普通用户需求了

[awmleer]

我理解是 命令式的useFavicon 在切换页面时实现favicon随着切换更友好些233 而且通常来说useTitle + useFavicon就能满足普通用户需求了

嗯嗯 +1
Hooks 形态的 useFavicon 和组件形态的 React Helmet 的确还是适用场景不太一样的，欢迎 PR～ @linbudu599