I have created a dynamic import to use icons from our library. It looks something like this:

// icons file
export { ArrowLeft } from './ArrowLeft';
export { ArrowRight } from './ArrowRight';
export { Checked } from './Checked';
export { CircleCar } from './CircleCar';

And this is the component:

import * as Icons from '../../components/Icons';
import * as z from 'zod';

const Schema = z.object({
  content: z.object({
   iconName: z.string()
   })
})

type JustAReactComponentProps = z.infer<typeof Schema>

const JustAReactComponent = ({content}: JustAReactComponentProps) => {
   const SecondaryIcon = Icons[content.iconName] as React.JSXElementConstructor<any>;//is this the correct type btw?
   return <SecondaryIcon />
} 

And lets say that we have 30 icons and someone tries to set iconName as an icon that is not in the list, how can I enforce with Typescript that only the ones in the icons file are enabled to be used?

This question below seems to have the same problem I do but the solutions do not work for me(And I'm not looking for an external package). How to find all imported (in code) dependencies within a TypeScript project?