I am building an icon library for future use in React component library. I have an IconFlag component which should accept one of the flag icons svg.
Icons svg are in ./icons/flags folder exported from index.ts like this:
export * as AD from "./ad.svg";
...
export * as ZW from "./zw.svg";
Then I import them in the IconFlag component itself and extract type union:
import * as flags from "./icons/flags";
type IconFlagNames = keyof typeof flags;
Now I want to access default value of module exports in my component and this is the part, that gives me a warning unable to validate computed reference to imported namespace 'flags':
export const IconFlag = ({ name }: IconFlagNames ) => {
const icon = flags[name].default;
return (
...
)
}
How do I type this correctly?
upd: This error obviously comes from eslint rule import/namespace, tried adding /*eslint import/namespace: ['error', { allowComputed: true }]*/ but with no success.