如何在React应用中引入material-design-icons的monitor_heart图标

• React组件命名不符合规范：React要求自定义组件必须以大写字母开头，你导入时使用小写的monitor_heart命名，直接当作JSX组件<monitor_heart />调用时，React会将其识别为原生HTML标签，而非你导入的SVG资源。
• 导入方式与项目配置不匹配：如果你的项目没有配置SVG转React组件的loader（如@svgr/webpack），直接导入的SVG会被当作静态资源路径处理，此时{monitor_heart}渲染的只是图片路径字符串，无法显示图标。
• 包使用逻辑不匹配：你此前使用的Material UI图标是官方预先封装好的React组件，可直接导入调用，本次使用的@material-design-icons/svg是独立的SVG资源包，二者调用逻辑存在差异。

方案1：继续使用SVG包（推荐，按需引入体积更小） #

如果是Create React App创建的项目，无需额外配置，直接调整导入写法即可：

1. 调整导入语句，使用ReactComponent别名映射为大写开头的组件：

import { ReactComponent as MonitorHeart } from "@material-design-icons/svg/filled/monitor_heart.svg"

2. 组件内直接调用：

<div>
  <MonitorHeart />
</div>

如果是自定义Webpack配置的项目，先安装@svgr/webpack，在Webpack配置中添加SVG资源的处理规则后，再按上述写法导入使用即可。

方案2：改用字体图标包实现 #

如果你更习惯字体图标的使用方式，可按以下步骤操作：

1. 安装对应字体包：

npm install @material-design-icons/font

2. 在项目入口文件（如index.js）中引入对应样式：

import '@material-design-icons/font/filled.css'

3. 组件内直接通过字体类名渲染：

<div>
  <span className="material-icons filled">monitor_heart</span>
</div>

内容的提问来源于stack exchange，提问作者React Beginner