子コンポーネントへのアイコンの渡し方

Question

前提・実現したいこと

React 初心者です。
React + TypeScript の環境で、Material-UI を使用していますが、
親のコンポーネントから子コンポーネントに表示するアイコン指定の方法がわかりません。

発生している問題・エラーメッセージ

以下ソースにおいて、MenuItemProps では iconType の型に何を指定すればよいのでしょうか。

該当のソースコード

// 親コンポーネント

import InfoIcon from "@material-ui/icons/Info";
...
function MyAppBar() {
...
  <MenuButton iconType={InfoIcon}>
...
}

// 子コンポーネント　MenuButton.tsx

type MenuItemProps = {
    iconType?: object;
}
function MenuButton( props: MenuItemProps ) {
  const Wrapper = props.iconType;
  return (
    <React.Fragment>
            {<Wrapper />}
    </Rect.Fragment>
  );
}

Comments

[hoshi-takanori]

InfoIcon の型は OverridableComponent<SvgIconTypeMap<{}, "svg">> というもののようですが、こんなの書きたくない (実装詳細っぽいし) し、iconType に Material UI 以外のものも指定できるようにしたいと思ったら React.createElement の最初の引数になりうる型を列挙する必要があるし、any かなぁ。
または、icon として JSX.Element を指定するようにするか…。

[hyamazaki]

回答ありがとうございます。
any 指定で良いのですね。
TypeScript なので、厳密に型定義が必要なものだとばかり思っていました。

[hoshi-takanori]

any はもちろん妥協ですけど、仕方ない場合もあるってことです…。

[hyamazaki]

解決済みにするために、回答にコメントしていただけないでしょうか。

Answer 1

InfoIcon の型は OverridableComponent<SvgIconTypeMap<{}, "svg">> というもののようですが、こんなの書きたくない (実装詳細っぽいし) し、iconType に Material UI 以外のものも指定できるようにしたいと思ったら React.createElement の最初の引数になりうる型を列挙する必要があるし、any でしょうか。
参考: https://stackoverflow.com/a/57412808/1019868