Closed2021/05/08にクローズ2

faviconを作るのがめんどくさい時に絵文字をSVG化するやつの話

terrierscript 2021/05/08に更新

元ネタ

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>">

svg分けておくパターン

https://stackoverflow.com/a/61238584

terrierscript 2021/05/09に更新

outerHTMLでhooksでもいける。クライアント限定なのであまりイケてはない。雑に見分けつけたいだけならこれでも十分

export const Favicon = () => {
  const [icon, setIcon] = useState<string>("")
  return <div>
    <Head>
      <link rel="icon" href={icon} />
    </Head>
    <svg style={{ display: "none" }} xmlns="http://www.w3.org/2000/svg" ref={(ref) => {
      ref && setIcon(`data:image/svg+xml,${ref.outerHTML}`)
    }}>
      <text y="32" fontSize="32">🦤</text>
    </svg>
  </div>
}

あと、逆に「動的に絵文字変えたい」みたいなときはわりと使える手段になりそう

このスクラップは2021/05/08にクローズされました