CODEWITHSUNDEEP
typescript
Socrates
Socrates

Reputation: 9564

Different TypeScript import types

What is the difference between these TypeScript import types?

import SettingsIcon from "@material-ui/icons/Settings";
import { MenuList } from "@material-ui/core";

As far as I understand, the first one without curly brackets is a direct class import and and the second is one class out of a collection of classes. Would that be right? One thing that does not work is importing several *Icon classes from @material-ui/icons and I cannot really tell why, i.e. the following does not work:

import { ImageIcon, LanguageIcon, DescriptionIcon, MenuIcon, SchoolIcon, SettingsIcon } from "@material-ui/icons";

Why can I not import those icon classes? How can I find out what type of import I need?

Upvotes: 0

Views: 232

Answers (1)

Manit
Manit

Reputation: 1105

If you go through the document, for imports - it clearly states that

If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:

 import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
 import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

If your environment support tree-shaking you can also import the icons this way:

 import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

So, you can do it only if your dev environment supports tree-shaking. You can refer to the document here: Imports for material-ui

Upvotes: 2

Related Questions