DEV Community

Haruto Hirakawa
Haruto Hirakawa

Posted on

そのSVGはSVGElementではない

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

const Icon = () => {
  <svg>
    ...
  </svg>
}
Enter fullscreen mode Exit fullscreen mode

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

import type { ReactElement } from 'react'

interface Props {
  ...
  icon: ReactElement
  ...
}
Enter fullscreen mode Exit fullscreen mode

小話でした

Top comments (0)