如何将MUI Icon导入为React组件并自定义引入的组件名称

你之前的写法不符合ES6模块导入语法，针对MUI图标导入的两种常用场景，正确写法如下：

• 单图标路径导入（按单个图标文件引入）
  @material-ui/icons/[图标名]路径对应的模块为默认导出，直接将导入标识符写为自定义名称即可，无需使用as关键字：

// 正确写法，somename就是你要的自定义组件名
import somename from '@material-ui/icons/ViewQuilt';

• 全量包命名导入（从完整图标库中引入）
  如果直接从@material-ui/icons全量包导入，属于命名导入场景，需要用as关键字完成重命名：

// 命名导入下的重命名写法
import { ViewQuilt as somename } from '@material-ui/icons';

注意：React组件要求名称首字母必须大写，建议将自定义命名调整为大驼峰格式（如CustomViewQuilt），否则React会将其识别为原生HTML标签导致运行报错。

内容的提问来源于stack exchange，提问作者Richardson