Material-ui 报警图标 - Javascript

Material-UI 是一个React组件库，用于实现 Google 的 Material Design 规范。其中包括了丰富的图标库，其中就包括了报警图标。

安装

可以通过npm包管理器进行安装，使用以下命令：

npm install @material-ui/icons

使用

在需要使用报警图标的组件中引入它：

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

const MyComponent = () => {
  return (
    <div>
      <Warning />
      <span>警告！</span>
    </div>
  );
};

export default MyComponent;

属性

这里是一些常用的报警图标的属性：

• color - 指定图标的颜色，可以是 inherit, primary, secondary 或者任何一个 CSS 颜色值
• fontSize - 指定图标的大小，默认是 default。其它有效值为： small，large
• htmlColor - 指定图标的HTML颜色的字符串

例如：

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

const MyComponent = () => {
  return (
    <div>
      <Warning color="error" htmlColor="#ff0000" fontSize="large" />
      <span>警告！</span>
    </div>
  );
};

export default MyComponent;

以上代码会渲染出一个颜色为红色，大小为 large 的报警图标。

更多属性可以查看 Material-UI 的文档。