そのSVGはSVGElementではない

React + TypeScript で開発しているときに陥りがちな罠なんですが、SVGなどの要素をコンポーネントとして使用する際にReactElementに変化してしまっている可能性があるので気をつけたほうが良いよねってお話です。

const Icon = () => {
  <svg>
    ...
  </svg>
}

こういう風なコンポーネントを定義していた場合、これをpropsで渡すときに受け取る側の型は以下のようにしないとダメですね。

import type { ReactElement } from 'react'

interface Props {
  ...
  icon: ReactElement
  ...
}

小話でした