起因

我正在使用react-icons来显示图标，
在VSCode的IntelliSense中，我希望能够获得对可用图标的建议/自动完成功能。

我个人经常使用的一种写作方式

1. 请设计师选择在项目中使用的图标集。

将被选中的图标集导入并进行封装，创建以下组件。

// 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" />

留心事项

最后

如果有更好的方法，请在评论中告诉我。