Как разрешить определенные значения для динамического импорта значка?
Я создал динамический импорт для использования иконок из нашей библиотеки. Это выглядит примерно так:
// 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?