reactjs - Finnes det en måte å importere filnavn som type på


Jeg laget en ikonkomponent som bruker filnavn som en prop for å hente riktig ikon fra en katalog og vise det. Her er et eksempel:

<Icon name="close" />

Den vil bruke filen close.svg fra ikoner-katalogen og vise den.
Det jeg ønsket å gjøre er å lage en type som tillater at navnet bare kan være en av filene som er i ikoner-katalogen. For eksempel, hvis ikoner-katalogen ser slik ut:

Type bør være "close" | "collapse" | "delete".

Er det mulig å gjøre noe slikt?

Jeg klarte ikke å finne en måte å importere filnavn fra en katalog på, så jeg bestemte meg for å prøve en annen tilnærming:
Jeg bruker vites import.meta.glob for å importere alle SVG-filer fra en katalog, slik:

import.meta.glob('../assets/icons/*.svg', { eager: true });

Det returnerer et objekt med moduler, hvor hver modul er et SVG-ikon som en React-komponent. Jeg skrev et lite Vite-plugin for å legge til et ikonnavn til hver SVG-moduleksport, så nå ser hver modul slik ut:

Men returtypen til import.meta.glob er Record<string, unknown>, så jeg kan ikke bruke iconName som type siden modultypen er ukjent.

Så hvis det ikke finnes en måte å importere filnavn fra en katalog på, kanskje det finnes en måte å bruke modulens eksport som en type? Jeg er helt fortapt her, så enhver hjelp vil bli satt pris på.