Material-ui: SvgIcon TypeScript declaration causes thousands of errors

[mjadczak]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Compiling with the included TS declarations should not throw errors.

Current Behavior 😯

Since upgrading to 4.1.0 of both @material-ui/core and @material-ui/icons, whenever I compile my project using TS, I get thousands of errors of the form

node_modules/@material-ui/icons/index.d.ts:5222:30 - error TS2749: 'SvgIcon' refers to a value, but is being used as a type here.

5222 export const ZoomOutTwoTone: SvgIcon;

(one per icon defined in the icons package).

This is because in @material-ui/core/SvgIcon/ScgIcon.d.ts, SvgIcon is declared as an exported constant, not a type:

declare const SvgIcon: React.ComponentType<SvgIconProps>;

I believe this issue was introduced in 7063f56b54b35c5e1afcfc2f65db067436816d9d, where we should be typing these components as typeof SvgIcon instead of SvgIcon.

Steps to Reproduce 🕹

Import an icon into a TS-enabled project and compile.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.1.0 |
| React | v16.8.6 |
| TypeScript | v3.5.1 |

[FabianSellmann]

Can confirm this error.

[luky1984]

With older typescript i even get multiple errors (another message)

/node_modules/@material-ui/icons/index.d.ts
(4,27): Cannot find name 'SvgIcon'.

but not on fresh typescript project so there must be also another condition. maybe new fresh project automatically does skipLibCheck or the difference in react-scripts-ts vs react-scripts i dont know. i am struggling to make it working. its true that if i open in editor that problematic file even in fresh project there are the errors too, but not when running the app.

"@material-ui/core": "^4.1.0",
"@material-ui/icons": "^4.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"typescript": "3.3.3"
"react-scripts-ts": "2.15.1",

whole dependencies here:

"dependencies": {
"@material-ui/core": "^4.1.0",
"@material-ui/icons": "^4.1.0",
"create-react-class": "15.6.3",
"expired-storage": "1.0.2",
"jump.js": "1.0.2",
"lodash": "4.17.11",
"moment": "2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-google-maps": "9.4.5",
"react-pdf": "4.0.2",
"react-redux": "5.0.7",
"react-router": "4.2.0",
"react-router-dom": "4.2.2",
"react-scripts-ts": "2.15.1",
"react-scrollable-anchor": "0.6.1",
"react-tappable": "1.0.4",
"recompose": "^0.30.0",
"redux-logger": "3.0.6",
"redux-saga": "0.16.0",
"typescript-fsa": "3.0.0-beta-2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
},
"devDependencies": {
"@types/react": "^16.8.19",
"@types/googlemaps": "3.30.12",
"@types/jest": "22.2.3",
"@types/lodash": "4.14.119",
"@types/markerclustererplus": "2.1.33",
"@types/node": "10.1.2",
"@types/react-redux": "5.0.20",
"@types/react-router": "4.0.25",
"@types/react-router-dom": "4.2.6",
"typescript": "3.3.3"
}
}

dependencies of fresh new project (i lowered typescript but doesnt matter):

"dependencies": {
"@material-ui/core": "^4.1.0",
"@material-ui/icons": "^4.1.0",
"@types/jest": "^24.0.13",
"@types/node": "^12.0.7",
"@types/react": "^16.8.19",
"@types/react-dom": "^16.8.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"typescript": "3.3.3"
},

if i put in old project the typescript version 3.5.1, i get same errors as the thread starter.

[CraftsDev]

Instead try using:

SvgIconComponent

I noticed this:
`import SvgIcon from '@material-ui/core/SvgIcon';

type SvgIconComponent = typeof SvgIcon;

export const AccessAlarm: SvgIconComponent;
export const AccessAlarmOutlined: SvgIconComponent;`

This worked for me.