Different TypeScript import types

Question

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?

Have a look at this page, please. Here they explain how to handle these icons: material-ui.com/style/icons. It is a design decision and somewhat stability too whether you provide each component or icon in a separate path or not. There was a time when everyone was keen using the so called 'barrels' which are index.ts-files which you could use to bundle imports. But due to circle dependency problems they recommended somewhen not to do it anymore. Maybe that's the reason. — user6749601
– user6749601, Commented Feb 1, 2019 at 5:25
This post answers your first question: stackoverflow.com/questions/38729486/… — user6749601
– user6749601, Commented Feb 1, 2019 at 5:30

Manit · Accepted Answer · 2019-02-01 05:29:12Z

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

Collectives™ on Stack Overflow

Different TypeScript import types

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related