我们可以使用带有PrimeAreact按钮的材料图标吗

Question

当前我正在使用PrimeAreact中的Button。他们正在使用PrimeIcons的图标，但图标的数量有限，我想使用材质图标。

<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%' }} />

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

Answer 1

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

1. 首次安装材质图标$ npm install material-design-icons
2. 我们导入了类似@import 'material-design-icons/iconfont/material-icons.css';的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;

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

Answer 2

可以。但你将无法像现在这样使用它。你也可以使用字体图标。这可能是你使用它的最佳方式。

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