Material-UI Icons npm - TypeScript

Material-UI Icons 是一个为 Material-UI 框架设计的 Icon 组件库。它提供了丰富的内置图标，可以在任何 web 应用中使用。

本文将主要介绍 Material-UI Icons 在 Typescript 中的使用。

安装

使用 npm 进行安装：

npm install @material-ui/icons

使用

导入

使用 ES6 Module 的方式导入需要用到的图标，如下：

import { AddCircle } from '@material-ui/icons';

渲染

在组件中通过 jsx 渲染需要用到的图标，如下：

import React from 'react';
import { AddCircle } from '@material-ui/icons';

const MyComponent = () => {
  return <AddCircle />;
};

export default MyComponent;

Props

@material-ui/icons 中的每一个图标都有很多内置 Props，可以通过官方文档查看具体的 Props。

我们也可以通过类型检查来获取每个图标所支持的属性，如下：

import { AddCircle } from '@material-ui/icons';

type AddCircleProps = React.ComponentProps<typeof AddCircle>;

总结

Material-UI Icons 提供了丰富的内置图标，配合 Typescript 的类型检查使用，可以让我们在开发过程中避免很多不必要的错误，从而提高开发效率。