Ошибка при использовании пользовательского значка для переключателя

Question

Когда я пытаюсь использовать пользовательский значок проп, я получаю эту ошибку: index. js: 1406 Предупреждение: сбойный тип пропуска: неверный пропел icon, предоставленный ForwardRef(Switch), ожидается ReactNode.

Я пробовал несколько вещей, и я не могу заставить его работать. Есть идеи, почему он не работает?

<Switch
  checked={formik.values.roleBasedAccess}
  onChange={handleRoleBasedChange}
  icon={HexagonSwitch}
  value="roleBasedAccess"
/>

И компонент HexagonSwitch:

import React from 'react';

const HexagonSwitch = () => {
        return (
            <svg width="24px" height="21px" viewBox="0 0 24 24">
                <g id="Add-on/Guided-Workflow/Pieces/Status-Indicator/Complete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <polygon id="Polygon" fill="red" fill-rule="nonzero" points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5"></polygon>
                </g>
            </svg>
        );
};

Answer 1

Сообщение «Failed prop type» сообщает, что он ожидает узел, но вы предоставляете тип компонента.

Тип компонента: HexagonSwitch

Узел (т.е. экземпляр тип компонента): <HexagonSwitch/>

Ниже приведен рабочий пример.

import React from "react";
import Switch from "@material-ui/core/Switch";

const HexagonSwitch = () => {
  return (
    <svg width="24px" height="21px" viewBox="0 0 24 24">
      <g
        id="Add-on/Guided-Workflow/Pieces/Status-Indicator/Complete"
        stroke="none"
        strokeWidth="1"
        fill="none"
        fillRule="evenodd"
      >
        <polygon
          id="Polygon"
          fill="red"
          fillRule="nonzero"
          points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5"
        />
      </g>
    </svg>
  );
};
export default function Switches() {
  const [checked, setChecked] = React.useState(true);

  return (
    <div>
      <Switch
        checked={checked}
        onChange={event => setChecked(event.target.checked)}
        value="checkedA"
        icon={<HexagonSwitch />}
        checkedIcon={<HexagonSwitch />}
        inputProps={{ "aria-label": "secondary checkbox" }}
      />
    </div>
  );
}