动态加载图标

Question

Hi have a script that import location, which consists of multiple svg file and a index.ts file to import and export them.

import * as Icons from '../../icons'

I then have a functional component that returns the icon based on the icon name, which I am getting error.

interface props extends React.SVGProps<SVGSVGElement> {
  icon: string
  title?: string | undefined
}

function Icon({ icon, ...props }: props) {
  const Icon = Icons[icon] <= error here
  return <Icon {...props} />
}

function SidebarContent() {
  return (
  //some code here
  <Icon className="w-5 h-5" aria-hidden="true" icon={route.icon} />
  //some code here
  )
}

The error I am getting is this:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("d:/Code/JS/meal-order/frontend/src/icons/index")'.
  No index signature with a parameter of type 'string' was found on type 'typeof import("d:/Code/JS/meal-order/frontend/src/icons/index")'.ts(7053)

I would like to know how in the Icon component. How can it accept icon name (Icon[name]) and return the correct icon? or probably there is other way to do this?

More info: If I write the code like the following then it works without complaining. However that doesn't fit the purpose because my intention is to dynamically load the icon based on the icon name i've passed.

function Icon({ icon, ...props }: props) {
  const Icon = Icons.ButtonsIcon
  return <Icon {...props} />
}

Answer 1

Updated:

Here's a CodeSandbox of what I believe you're trying to do.

https://codesandbox.io/embed/frosty-stitch-li3wiz?fontsize=14&hidenavigation=1&theme=dark

If you posted a codesandbox I could assist better that way, however, as long you Icons are components themselves, not just SVGs, it should work.