NextjsでSVGファイルを動的にimportして、propsも渡せるようにしたい

Question

NextJS初心者です。
NextJS+typescriptとアトミックデザインを用いてアプリを作っています。

指定されたSVGファイルを表示するようなコンポーネントを作成しているのですが、
ロード時の負荷を減らすため、以下のように静的にはでなく、動的にimportできればと思って色々調べたのですが、
propsを渡せないのでできません。

import dynamic from 'next/dynamic'
const Dummy = dynamic(() => import('public/images/dummy.svg'))
const Dummy2 = dynamic(() => import('public/images/dummy2.svg'))

interface Props {
  iconType: 'dummy' | 'dummy2'
  height: number
  width: number
}

const SvgIcon = ({ iconType, height, width }: Props) => (
  if (iconType === 'dummy') {
    return (
      <Dummy width={width} height={height} /> // 型がちがうためprops渡せない
    )
  } else if (iconType === 'dummy2') {
    return (
      <Dummy2 width={width} height={height} /> // 型がちがうためprops渡せない
    )
  }

  return <></>
)

export default SvgIcon

どなたか、同じような悩みで解決した方等いましたら、ご教授お願いします。

Answer 1

参考に下記サイトをご覧ください。
https://zenn.dev/toono_f/articles/6c8ef6e4e771b9

svgのままではなく、jsxに変換し、呼び出しているようです。
現状：svg　→　呼び出し
理想：svg　→　jsx →　呼び出し

Comments

[ogyan]

ご回答ありがとうございます。