Tabler Iconsのアイコンを動的に使用する

はじめに

Mantineのサイト内では基本的に各種アイコンにTabler Iconsが利用されており、コンポーネントの利用例にもTabler Iconsが使用されています。（これとか）
Tabler Iconsのアイコンを動的に利用したい場面があったのですが、公式ドキュメントを見ても任意のアイコンを利用するケースでのコードしか載っておらず、日本語でその方法を掲載している記事が見つからなかったため、記録として残しておきます。

実装

例えば下記のようなデータがあったとします。

const categories = [
  {
    name: '食事',
    icon: 'IconFish',
  },
  {
    name: '書籍',
    icon: 'IconBook',
  },
  {
    name: '病院',
    icon: 'IconBuildingHospital',
  },
]

iconの値には、通常アイコンを利用する際、importに記述する値を入れています。

ひとまず横並びに表示させようとします。

import { Flex, ThemeIcon } from '@mantine/core'
import * as icons from '@tabler/icons'

const categories = [
  {
    name: '食事',
    icon: 'IconFish',
  },
  {
    name: '書籍',
    icon: 'IconBook',
  },
  {
    name: '病院',
    icon: 'IconBuildingHospital',
  },
] as const

function Demo() {
  return (
    <Flex gap="xs">
      {categories.map((category, i) => (
        <ThemeIcon key={i}>
          {ここにアイコン表示させたい}
        </ThemeIcon>
      ))}
    </Flex>
  )
}

export default Demo

{ここにアイコン表示させたい}の箇所にアイコンを表示させるために、JSX.Elementを返す関数を作成します。

import * as icons from '@tabler/icons'

...省略

type Props = {
  icon: keyof typeof icons
}

const TablerIcons = (props: Props) => {
  const { icon } = props
  const Icon = icons[icon]

  return <Icon />
}
  
...省略

<ThemeIcon key={i}>
  <TablerIcons icon={category.icon} />
</ThemeIcon>

無事、動的にアイコンを表示できることができました🎉

最終コード

import { Flex, ThemeIcon } from '@mantine/core'
import * as icons from '@tabler/icons'

const categories = [
  {
    name: '食事',
    icon: 'IconFish',
  },
  {
    name: '書籍',
    icon: 'IconBook',
  },
  {
    name: '病院',
    icon: 'IconBuildingHospital',
  },
] as const


type Props = {
  icon: keyof typeof icons
}

function Demo() {
  const TablerIcons = (props: Props) => {
    const { icon } = props
    const Icon = icons[icon]

    return <Icon />
  }

  return (
    <Flex gap="xs">
      {categories.map((category, i) => (
        <ThemeIcon key={i}>
          <TablerIcons icon={category.icon} />
        </ThemeIcon>
      ))}
    </Flex>
  )
}

export default Demo

参考

Dynamic Tabler Icons import for react

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。