2

在我的一个 React 项目中，我在 package.json 中使用带有这些信息的 Material-UI 图标

"@material-ui/core": "^4.9.10",
"@material-ui/icons": "^4.5.1",

在我添加此链接ContentCut上可用的图标之前，所有图标都可以正常工作： 在此处输入图像描述

这就是我导入它的方式：

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

但我得到了错误：

找不到模块：无法解析“@material-ui/icons/ContentCut”

我尝试使用纱线升级图标包：

yarn upgrade @material-ui/core --latest
yarn upgrade @material-ui/icons --latest

但这并不能解决问题。

我创建了这个代码框，它的最新版本是今天的v1.4.9@material-ui/icons，如npm 项目页面上所述，以说明问题（评论ContentCut导入行以查看错误）。

有没有人解决了这个特定问题（当图标可用但即使在 npm/yarn 升级后也无法导入）？

4

5 回答 5

2

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

如果您有来自 material.io 站点的图标的 svg，则可以通过从 svgSvgIcon中获取path元素来创建元素：

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>
  );
}

编辑 ContentCut 图标

于 2020-06-23T21:54:16.330 回答
2

安装材料芯库：

npm install @material-ui/core
于 2021-03-28T09:34:47.630 回答
0

这意味着 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 />
于 2020-06-23T21:41:10.690 回答
0

我在反应功能组件中遇到了同样的问题，似乎链接到实例。我有这个工作，但如果音频在 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
于 2020-12-08T10:22:03.637 回答
0

适合我的解决方案：

    npm i @material-ui/icons
于 2021-07-25T14:40:17.657 回答