chakra uiを使用して、ボタンにハンバーガーアイコンを埋め込もうとしましたが、 TypeErrorが出てしまう

はじめに

chakra uiを使用して、ボタンにハンバーガーアイコンを埋め込もうとしましたが、
TypeErrorが出てしまう

問題

下記のように @chakra-ui/icons からimportしているのにも関わらず、「TypeError」が出る。

Header.tsx

import { HamburgerIcon } from "@chakra-ui/icons";
import { Box, Flex, Heading, IconButton } from "@chakra-ui/react";
...

export const Header: FC = memo(() => {
return (
//...
    <IconButton aria-label="メニューボタン" size="sm">
       <HamburgerIcon />
    </IconButton>
  )
});

解決方法

公式ドキュメントによると、v3から chakra-ui/iconsは削除されたとのこと。

代わりに react-icons/fa の FaBars を使用。

import { FaBars } from "react-icons/fa";

<IconButton aria-label="メニューボタン" size="sm">
    <FaBars />
</IconButton>

無事、アイコンを表示することができました。

おわりに

文法やインストールしたパッケージに問題ないのに、エラーが出る場合は公式ドキュメントを疑うことが大事。