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

概要

Chakra UI ではいくつかアイコンが提供されていますが、数が少なく大抵の場合サードパーティのライブラリーを導入する事になると思います。

そこで今回は Icon コンポーネントを使った他ライブラリーの利用方法を紹介したいと思います。

やり方

Icon コンポーネントには as という props が用意されており、こちらにアイコンを渡す事で Chakra UI の提供するコンポーネントとして利用する事が出来るようになります。

react-icons を利用した例 (公式抜粋)

example.ts

// 1. 他ライブラリーからアイコンをimport
import { Icon } from '@chakra-ui/react'
import { MdSettings } from 'react-icons/md'

// 2. `as` propを利用する
function Example() {
  return <Icon as={MdSettings} w={4} h={4} />
}

ただこのままだとアイコン毎にコンポーネントを作る必要があるので、
以下のように props 経由で表示するアイコンを切り替えるようにすると便利だと思います。
(多分もっと良いやり方があると思うので詳しい人教えてください🙇‍♂️)

mapper.ts

//別ファイルでアイコンを読み込んでオブジェクトから取り出せるようにしておく。
import {
  FaTwitter,
  FaTwitch,
  FaLink,
  FaYoutube,
  FaSearch,
} from 'react-icons/fa'

export const iconMapper = {
  twitter: FaTwitter,
  twitch: FaTwitch,
  link: FaLink,
  youtube: FaYoutube,
  search: FaSearch,
}

CustomIcon.tsx

import React from 'react'
import { Icon, IconProps } from '@chakra-ui/react'

//上で定義したやつ
import { iconMapper } from '~/assets/scripts/icons'

type Props = IconProps & {
  icon: keyof typeof extendIconMapper
}

const CustomIcon: React.FC<Props> = (props) => {
  const { icon } = props
  return (
      <Icon as={iconMapper[icon]} {...props} />
  )
}

export default CustomIcon

これでコンポーネントを呼び出す際に icon props に key を渡す事で指定したアイコンを表示する事ができるようになります。

index.tsx

import { NextPage } from 'next'
import React from 'react'

const Home: NextPage = () => {
  return (
    <div>
      {/* YouTubeのアイコンが表示される */}
      <CustomIcon icon="youtube" />
    </div>
  )
}

export default Home

参考にした記事

Icon - Chakra UI
https://chakra-ui.com/docs/media-and-icons/icon

React Icons
https://react-icons.github.io/react-icons/