I have been working on a react-typescript project in which I am using a lot of external libraries and I frequently find myself using any type for those libraries. Please look at the code below for the demonstration
This is for the Fontawesome library
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faSquare,
} from '@fortawesome/free-regular-svg-icons';
interface IProps {
title: string;
icon: any;
onClick?: () => void;
sx?: { [index: string]: string };
}
const icons ={
title :_,
icon : faSquare
}
For the above code, what would be the type of icon. The value of which is faSquare. When I hovered over it the type is IconDefinition. But, I am not sure where to import it or if that is the way to do it.
The @fortawesome packages embed their own types, thus the type of icons.icon is inferred automatically.
In VSCode, you can right-click and "Go to type definition" to check type.
In your case, the type of faSquare is IconDefinition
export interface IconDefinition extends IconLookup {
icon: [
number, // width
number, // height
string[], // ligatures
string, // unicode
IconPathData // svgPathData
];
}
You can just add it to your import from @fortawesome/free-regular-svg-icons'
import {faSquare, IconDefinition} from '@fortawesome/free-regular-svg-icons';