Как разрешить определенные значения для динамического импорта значка?

Я создал динамический импорт для использования иконок из нашей библиотеки. Это выглядит примерно так:

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

А это компонент:

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

Допустим, у нас есть 30 иконок, и кто-то пытается установить iconName как значок, которого нет в списке, как я могу обеспечить с помощью Typescript, что только те, которые находятся в icons файл разрешено использовать?

Этот вопрос ниже, похоже, имеет ту же проблему, что и я, но решения для меня не работают (и я не ищу внешний пакет).Как найти все импортированные (в коде) зависимости в проекте TypeScript?

0 ответов

Другие вопросы по тегам