I am currently working with Typescript and incorporating Material-UI into my project. I am trying to define the component type for a variable as shown below:
import MoreVert from '@material-ui/icons/MoreVert'
import { SvgIconProps } from '@material-ui/core/SvgIcon';
let myIcon: SvgIconProps = <MoreVert />; // this code is not functioning as expected
However, I am encountering the following error message:
[ts]
Type 'Element' is not assignable to type 'SvgIconProps'.
Types of property 'type' are incompatible.
Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string'.
Type 'ComponentClass<any>' is not assignable to type 'string'.
You can find the contents of the SvgIcon.ts file here. Can you help me identify what mistake I am making?
import * as React from 'react';
import { StandardProps, PropTypes } from '..';
export interface SvgIconProps
extends StandardProps<React.SVGProps<SVGSVGElement>, SvgIconClassKey> {
color?: PropTypes.Color | 'action' | 'disabled' | 'error';
component?: React.ReactType<SvgIconProps>;
fontSize?: 'inherit' | 'default' | 'small' | 'large';
nativeColor?: string;
titleAccess?: string;
viewBox?: string;
}
export type SvgIconClassKey =
| 'root'
| 'colorSecondary'
| 'colorAction'
| 'colorDisabled'
| 'colorError'
| 'colorPrimary'
| 'fontSizeInherit'
| 'fontSizeSmall'
| 'fontSizeLarge';
declare const SvgIcon: React.ComponentType<SvgIconProps>;
export default SvgIcon;