状況
Chakra UI v3でアイコンボタンにハンバーガーアイコンを埋め込もうとした。
import { HamburgerIcon } from '@chakra-ui/icons';
<IconButton aria-label='メニューボタン' icon={<HamburgerIcon />}/>
しかしブラウザの表示が真っ白になってしまう。
解決法
公式ドキュメントによるとv3から@chakra-ui/iconsが削除されたとのこと。（スクショは英語を日本語に訳したものです）
今回はハンバーガーアイコンを使用したいので、$ npm install react-iconsでreact-iconsをインストール後、下記のコードに修正。
import { FaBars } from 'react-icons/fa';
<IconButton aria-label='メニューボタン'><FaBars /></IconButton>
アイコンボタンにハンバーガーアイコンが埋め込まれた状態で表示することが出来た。
まとめ
今までの@chakra-ui/iconsを使った記述法ではハンバーガーアイコンが表示できず、公式ドキュメントを読むまで@chakra-ui/iconsが使えなくなったことを知りませんでした。
現状、v3の情報のブログ記事などは少ないため公式ドキュメントを頼りにしていきたいです。