我们可以使用带有 PrimeReact 按钮的 Material Icon 吗

问题描述

目前我正在使用 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%' }} />

如果可以，请给我建议。

解决方法

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

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

像这样创建一个类

.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;

如果有人有更好的想法来简化这个，请评论！

,

是的，你可以。但是您将无法像当前使用它那样使用它。您还可以使用 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>