Creé una importación dinámica para usar íconos de nuestra biblioteca. Se ve algo como esto:

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

Y este es el componente:

 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 /> }

Y digamos que tenemos 30 íconos y alguien intenta configurar iconName como un ícono que no está en la lista, ¿cómo puedo hacer cumplir con Typescript que solo los que están en el archivo de icons están habilitados para usarse?

Esta pregunta a continuación parece tener el mismo problema que yo, pero las soluciones no funcionan para mí (y no estoy buscando un paquete externo). ¿Cómo encontrar todas las dependencias importadas (en código) dentro de un proyecto de TypeScript?