react-iconsのアイコン名をサジェストさせる方法

きっかけ

アイコンの表示にreact-iconsを使っており、
VSCode の IntelliSense で、使えるアイコンを サジェスト/オートコンプリート して欲しいと思った。

個人的によくやってる書き方

1. デザイナーさんにプロジェクト内で使用するアイコンセットを選んでもらう。
2. 選んでもらったアイコンセットをimportしてラップした、以下のコンポーネントを作る。

Icon.tsx

// GitHub Actions で利用している Linux と UNIX システムが大文字と小文字を区別するため、
// react-icons のドキュメントと異なり小文字で import しています
import * as iconsBs from "react-icons/bs"
import * as iconsFi from "react-icons/fi"
import { IconBaseProps } from "react-icons"

export type IconName = keyof typeof iconsBs | keyof typeof iconsFi

type IconProps = IconBaseProps & {
  name: IconName
}

const icons = { ...iconsBs, ...iconsFi }


// ↓jsdoc形式でコメントを書いておくと、ホバーしたときに説明が出るのでおすすめ↓
/**
 * 現在、使用できるアイコンは以下です。
 * - [Bootstrap Icons](https://react-icons.github.io/react-icons/icons?name=bs)
 * - [Feather](https://react-icons.github.io/react-icons/icons?name=fi)
 */
export const Icon: React.FC<IconProps> = ({ name, ...props }) => {
    const IconCore = icons[name]
    return <IconCore {...props} />
}

使うときの例

<Icon name="BsHouse" size=36 color="#d51dd2" />

注意点

バンドルサイズ削減のため、アイコンセットは極力少なくしたほうが良いと思われます。

あとがき

もっといい方法があれば、コメントで教えてください