Dynamic loading icon - reactjs

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[icon]) 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} />
}
Update:
This is how I fix the type error:
import react from "react";
import * as Icons from "../../icons";
type IIcon = React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
title?: string | undefined;
}>
export default function Icon({ icon = 'MenuIcon', ...props }) {
const myObj: { [index: string]: IIcon } = Icons
const NewIcon = myObj[icon]
return <NewIcon {...props} />
}

Answer 1

Updated:
Here's a CodeSandbox of what I believe you're trying to do.
Icon.js
import react from "react";
import * as Icons from "./icons";
export default function Icon({ icon, ...props }) {
const NewIcon = Icons[icon];
return <NewIcon {...props} />;
}
Icons/index.js
import { ReactComponent as ButtonIcon } from "./button.svg";
import { ReactComponent as BellIcon } from "./bell.svg";
export { BellIcon, ButtonIcon };
App.js
import Icon from "./Icon";
export default function App() {
return (
<div className="App">
<Icon icon="BellIcon"></Icon>
<Icon icon="ButtonIcon"></Icon>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
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.