如何導入材質 ui 圖標？我在使用 Material ui 圖標時遇到了一些問題

Question

我在我的項目中使用了帶有react的材質UI，在導入材質圖標時遇到了一些麻煩，我的代碼是從材質UI復制的（版本：“material-ui”：“^1.0.0-beta. 41", "material-ui-icons": "^1.0.0-beta.36",) 文檔，就像這樣：

import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';

而且我已經運行 npm 安裝材料圖標。 我的 chrome 控制台中的錯誤是：

./src/index/musicCard.js Module not found: Can't resolve '@material-ui/icons/PlayArrow' in 'C:\Users\wenji\Desktop\myblog\src\index' 我試過這個：

import SkipPreviousIcon from 'material-ui/icons/SkipPrevious';

和這個：

import SkipPreviousIcon from '@material-ui-icons/SkipPrevious';

但沒有任何區別，所以有人可以幫助我嗎？

Answer 1

圖標不是 material-ui/core 的一部分，因此必須使用兩個命令安裝它。

如果你使用 npm

npm install @material-ui/core
npm install @material-ui/icons

如果你使用紗線

yarn add @material-ui/core
yarn add @material-ui/icons

Answer 2

解決了，應該將圖標模塊添加到依賴項中。 使用 npm

npm install @material-ui/icons 

或使用紗線

yarn add @material-ui/icons 

Answer 3

將導入路徑從@mui/icons-material/改為@material-ui/icons/

這不是一個 100% 有效的解決方案，因為我還沒有能夠導入一些圖標（例如ConnectWithoutContact ）

不管怎樣，這個改變已經救了我好幾次了，所以這里是一個例子：

// Initial
import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';

// Fixed
import PermContactCalendarIcon from '@material-ui/icons/PermContactCalendar';

Answer 4

我剛剛解決了一個奇怪的問題（但在我發現原因后就不那么奇怪了）

在 mac 上它可以工作，但是當我部署到 linux 時它失敗並且找不到圖標

這是因為在 mac 上它不區分大小寫，而 linux 是

所以

import DeleteForEver from '@material-ui/icons/DeleteForEver'

在 mac 上工作但在 linux 上失敗

該文件實際上被命名為“DeleteForever”

所以正確的導入方法是

import DeleteForever from '@material-ui/icons/DeleteForever'

Answer 5

對於您需要的最新版本

npm install @mui/icons-material

由於Material-UI 現在是 MUI

Answer 6

material ui 不再提供來自“@material-ui/icons”的圖標。 相反，您需要從"@mui/icons-material"導入圖標。 因此，如果您使用最新版本並使用npm運行項目，則需要執行以下命令 -

npm install @mui/icons-material

如果你使用紗線然后運行以下 -

yarn add @material-ui/icons

現在你已經准備好像這樣使用你的材質圖標ExampleMaterialIcon -

import ExampleMaterialIcon from '@mui/icons-material/ExampleMaterialIcon';

Answer 7

依賴項：

"@material-ui/core": "^4.12.4",
"@material-ui/icons": "4.11.3",

例子：

import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";

 <FavoriteIcon
            fontSize="large"
            style={{ fill: "red", stroke: "red" }}
  />

 <ShareIcon fontSize="large" />