Material Ui Iconエラー

5706 ワード

Module not found: Can't resolve '@mui/icons-material/AccessAlarm'
このようにエラーが発生しました.
私の綿入れ.jsonの表示
@material-ui/icons:4.11.2版
@mui/material:5.26版
このように設定します.
エラーの原因は、アイコンが@material-uiで受信され、mui frameworkが@mui/materialで受信されたためです.
アイコンを使用するには、アイコンとフレームをインストールする必要がありますが、私は異なる方法で2つインストールしたようです.
https://flatlogic.com/blog/material-ui-icons-in-react/
ここのリンクはよく整理されています.このリンクに@material-uiがインストールされています.
こんなリンクも
@material-ui
https://www.npmjs.com/package/@material-ui/icons
@mui/material
https://www.npmjs.com/package/@mui/icons-material
私は上のブログの文章を見て、1つの命令を入力して、このnpmjsは報告することができます
しかし公式サイトでは.

そのまま@mui/icons-materialでインポート
@material-ui/iconsにインポートする場合
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
こう書けばよかった.

svgとして挿入


svg Iconで挿入したい場合は、何かをインポートする必要があります.
https://mui.com/api/svg-icon/のリンクに入り、このコードを挿入すればいいです.
import SvgIcon from '@mui/material/SvgIcon';
// or
import { SvgIcon } from '@mui/material';
ただし、@Mui/material-ui/iconsを使用している場合は@Mui/materialを追加していることに気づきました.
import { SvgIcon } from "@material-ui/core";
これでいいです.(fromの後ろのコードはiconではなくmaterial UI framework)
次に、次のように構成部品を作成し、return()セクションに<名前/>として挿入します.
function HomeIcon(props) {
                	return (
                	  <SvgIcon {...props}>
	                      	  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
                	 </SvgIcon>
                	);
}
 
And the code for color setting would look the following way:
·   	<div className={classes.root}>
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />
return(
...
   <HomeIcon />
...
)
ソース:https://flatlogic.com/blog/material-ui-icons-in-react/