您可以使用此处的搜索来查看哪些图标属于以下内容@material-ui/icons：https : //material-ui.com/components/material-icons/。ContentCut 不存在。

如果你有一个图标的 svg，比如来自 material.io 站点，你可以SvgIcon通过path从 svg 中抓取元素来创建一个元素：

const ContentCutIcon = createSvgIcon(
  <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z" />,
  "ContentCut"
);

这是您的沙箱的工作版本，利用了它：

import React from "react";
import MailIcon from "@material-ui/icons/Mail";
import ForwardIcon from "@material-ui/icons/Forward";
import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";

const ContentCutIcon = createSvgIcon(
  <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z" />,
  "ContentCut"
);
export default function App() {
  return (
    <div className="App">
      <h1>This is three working icons</h1>
      <ul>
        <li>
          <MailIcon />
        </li>
        <li>
          <ForwardIcon />
        </li>
        <li>
          <ContentCutIcon />
        </li>
      </ul>
    </div>
  );
}

安装材料核心库：

npm install @material-ui/core

这意味着 ContentCut 在 node_modules 中不可用。

解决此问题的一种方法是手动创建文件并保存到 node_modules 内的图标文件夹。我已经为您的 ContentCut SVG 代码创建了文件。

ContentCut.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon"));

var _default = (0, _createSvgIcon.default)(_react.default.createElement("path", {
  d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"
}), 'ContentCut');

exports.default = _default;

ContentCut.d.ts

export { default } from '@material-ui/core/SvgIcon';

添加到此路径 \node_modules@material-ui\icons

然后将此导入到您的组件

import ContentCutIcon from '@material-ui/icons/ContentCut';

<ContentCutIcon />

我在react功能组件中遇到了同样的问题，似乎链接到实例。我有这个工作，但如果音频在 SongButton 里面，它就不再工作了

const audio = new Audio("../song.mp3")
const SongButton = () =>{

const [isAudio, setIsAudio] = React.useState(false)

const onClick = () => {
    if(isAudio){
        audio.pause();
        //audio.currentTime = 0;
    }else{
        audio.play();
    }
    setIsAudio(!isAudio);
  }

  if(isAudio){
      return (
          <div className="SongButtonDiv">
               <PauseCircleOutlineIcon onClick={onClick} fontSize="large" />
          </div>
      )
  }else{
      return (
          <div className="SongButtonDiv">
               <PlayCircleOutlineIcon onClick={onClick} fontSize="large"/>
          </div>
       )
   }
}
export default SongButton