反应中的图标-table

Question

我一直在努力寻找如何在 ReactTable 的单元格中显示图标（来自库 react-table）。我所能找到的就是它接受 HTML 符号。有很多符号，但我要找的是显示标志...

Cell: () => (
  <span>&hearts;</span>
)

我已经尝试使用 <i class='fa fa-cloud' /> 进行测试，但无法正常工作。

有什么想法吗？

Answer 1

我找到了一个库 https://www.npmjs.com/package/react-flag-kit 可以这样使用 FlagIcons :

Cell: () => (
    <FlagIcon code="FR" size={20} />
)

React Icons <Icon /> 也可以在 Cell 中使用，但它不包含任何标志。

Answer 2

经过一番挖掘，我发现它与列有关。

所以在我的例子中，这些是我的专栏，我想传递一个 fontawesome ！图标，根据第一列的值改变颜色（“红色”会发出红色感叹号，“黄色”会发出黄色感叹号，等等）。
你抓住 value 通过传入的 props，更改 css class 并通过返回字体真棒图标来呈现图标。

    columns: [
      {
        accessor: "color",
        Header: "",
        Cell: (props) => (
          <FontAwesomeIcon
            icon={faExclamationCircle}
            className={"icon__" + props.value}
          />
        ),
      },
      {
        accessor: "employeeId",
        Header: "Employee ID",
      },
      {
        accessor: "cvfs",
        Header: "CVFS Net Change",
      },
      {
        accessor: "totalAlerts",
        Header: "Total Alerts",
      },
    ],
    data: [
      {
        employeeId: "11192",
        cvfs: -42,
        totalAlerts: 12,
        color: "red",
      },
      {
        employeeId: "12372",
        cvfs: -38,
        totalAlerts: 9,
        color: "red",
      },
      {
        employeeId: "17829",
        cvfs: -31,
        totalAlerts: 8,
        color: "orange",
      },
      {
        employeeId: "97283",
        cvfs: -22,
        totalAlerts: 6,
        color: "orange",
      },
      {
        employeeId: "76363",
        cvfs: -10,
        totalAlerts: 2,
        color: "yellow",
      },
    ]

反应中的图标-table

Icons in react-table

icons

reactjs

react-table

react-table-v6