Chakra UIで他ライブラリーのアイコンを利用したい場合 - Qiita

概要 Chakra UI ではいくつかアイコンが提供されていますが、数が少なく大抵の場合サードパーティのライブラリーを導入する事になると思います。 そこで今回は Icon コンポーネントを使った他ライブラリーの利用方法を紹介したいと思います。 やり方 Icon コンポーネントには as という props が用意されており、こちらにアイコンを渡す事で Chakra UI の提供するコンポーネントとして利用する事が出来るようになります。 react-icons を利用した例 (公式抜粋) // 1. 他ライブラリーからアイコンをimport import { Icon } from '@chakra-ui/react' import { MdSettings } from 'react-icons/md' // 2. `as` propを利用する function Example() { r