CODEWITHSUNDEEP
reactjstypescript
Dilshod Turobov
Dilshod Turobov

Reputation: 127

How to use Typescript definitions imported as `* as`

I am using react-icons and trying to import all icon definitions as import * as Icons from 'react-icons/fi' The question is how can I create a type that should be one of the types exported from Icons

e.g. I am trying to make props interface like this: 

interface Props {
   icon: Icons // don't know what to do here
}

This is how the react-icons/fi/index.d.ts file looks like: 

export declare const FiActivity: IconType;
export declare const FiAirplay: IconType;
export declare const FiAlertCircle: IconType;
export declare const FiAlertOctagon: IconType;
export declare const FiAlertTriangle: IconType;
export declare const FiAlignCenter: IconType;
.....

Upvotes: 1

Views: 1113

Answers (1)

pascalpuetz
pascalpuetz

Reputation: 5428

I am assuming you want the names of all the Icon constants in the Icons namespace, as the type of all Icons seems to be the same IconType.

In that case, you can use a combination of keyof and typeof to achieve that:

import * as Icons from 'react-icons/fi'

interface Props {
   icon: keyof typeof Icons
}

typeof will get you the type of the Icons. keyof then returns the name of the keys of that type as a union type. So the type you are getting will end up being 'FiActivity' | 'FiAirplay' | 'FiAlertCircle' | ....

If you wanted to accept any of those consts as a whole as prop, and not just the name, then you can just use IconType directly.

import * as Icons from 'react-icons/fi';
import {IconType} from 'react-icons';

interface Props {
   icon: IconType
}

Upvotes: 3

Related Questions