reactjs - ReactJS - '@material-ui/icons/Fastfood' 不工作
问题描述
ReactJS - '@material-ui/icons/Fastfood' 不工作。
页眉.js
import React, { Component } from 'react';
import './Header.css';
import Fastfood from '@material-ui/icons/Fastfood';
class Header extends Component {
render() {
return(
<div>
<header className="app-header">
<div className="app-logo">
<i class="material-icons">Fastfood</i>
</div>
</header>
</div>
)
}
export default Header;
头文件.css
.app-header {
background-color: #263238;
padding: 16px 16px 16px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.app-logo{
color: #fff;
font-size: 18px;
text-decoration: none;
}
包.json
{
"dependencies": {
"@material-ui/core": "^4.1.2",
"@material-ui/icons": "^4.2.1",
"@material-ui/styles": "^4.1.2",
"moment": "^2.24.0",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-scripts": "^3.0.1"
},
}
快餐 SVG 图标未显示在页面上。标题仅显示文本“快餐”代替徽标。
解决方案
我修改了如下所示的渲染函数来解决这个问题。
render() {
return(
<div>
<header className="app-header">
<Fastfood className='app-logo'/>
</header>
</div>
)
}