1

目前我正在使用 PrimeReact 的 Button。他们正在使用 PrimeIcons 的图标，但图标的数量是有限的，我想使用 Material Icons。

<Button label='View/Edit Job' icon="pi pi-pencil" className="p-button-info" 
                  tooltip='View/Edit Job'
                  onClick={(e) => gotoJob(e, job.id)} style={{ width: '100%' }} />

如果可能的话，请给我建议。

4

2 回答 2

1

我们能够使用材质图标并且仍然具有相同的功能。但是，您需要为要使用的每个图标创建一个类。我认为这是为这个功能付出的一点代价。

  1. 首先安装材质图标$ npm install material-design-icons
  2. 我们像这样导入了 CSS@import 'material-design-icons/iconfont/material-icons.css'; 您可以使用带有链接标签的标准方式导入它

像这样创建一个类

.dms-mat-icon-email::before {
  content: "email" /* This is the icon name from material */;
}

您现在可以像这样使用该类

<Button
  icon="material-icons dms-mat-icon-email"
></Button>

我们正在使用包装器组件来动态传递图标，因此我们不会对其进行硬编码

import * as React from "react";
import { Button } from "primereact/button";
import { Color } from "../theme/DMSTheme";
import classNames from "classnames";

interface IDMSButtonProps {
  label?: string;
  icon?: string;
  iconPos?: string;
  color?: Color;
  type:string;
}

const DMSButton: React.FunctionComponent<IDMSButtonProps> = (props) => {
  return (
    <Button
    type = {props.type}
      className={classNames({
        "dms-clr-text" : props.color && props.color === Color.Text,
        "p-button-text p-button-rounded": !props.label,
        "p-button-secondary" : props.color && props.color === Color.Secondary,
      })}
      iconPos={props.iconPos}
      label={props.label}
      icon={props.icon ? `material-icons dms-mat-icon-${props.icon}` : ""}
    ></Button>
  );
};

export default DMSButton;

如果有人有更好的想法来简化这一点，请发表评论！

于 2021-01-27T15:34:17.403 回答
0

是的你可以。但是您将无法像当前使用它一样使用它。您还可以使用 fontawesome 图标。这可能是你使用它的最佳方式。

<Button
    label="Hello"
    style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: '100%'
    }}
    className="p-button-info" 
    tooltip='View/Edit Job'
    onClick={(e) => gotoJob(e, job.id)}
  >
    <AccountCircleIcon />
  </Button>
于 2021-01-11T15:41:50.610 回答