Discussion on: The right way to use SVG icons with React

[kamesdev]

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Icon.

[Stepan Tsukanov]

i think you are using next... i faced the same Error.
i installed package svgr react-svgr.com/docs/next/ by instruction and then i did this (it is different ^ but same idea to use svg file name as prop)

import type { FC, SVGProps } from 'react'
import dynamic from 'next/dynamic'

import clsx from 'clsx'

interface IIconProps {
  readonly name: string
  readonly className?: string
  readonly fill?: string
  readonly height?: number
  readonly widht?: number
  readonly onClick?: () => void
}

export default function Icon(props: IIconProps) {
  const { name, className, ...otherProps } = props

  const CustomIcon = dynamic(() => import(`@/assets/svg/${name}.svg`)) as FC<SVGProps<SVGSVGElement>>
``
  return (
    <div className={clsx('d-flex position-relative', className)}>
      <CustomIcon {...otherProps} />
    </div>
  )
}