如何在material-ui的`SvgIcon`中加载外部svg文件？答案

【问题标题】：How to load external svg file in `SvgIcon` in material-ui?如何在material-ui的`SvgIcon`中加载外部svg文件？
【发布时间】：2019-09-12 06:20:14
【问题描述】：

我在来自material-ui https://material-ui.com/api/svg-icon/ 的反应应用程序中使用SvgIcon。文档中的所有示例都是<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />。我不知道那是什么。如何使用此组件从外部文件呈现 svg？

我已经检查了这个帖子How to use an SVG file in a SvgIcon in Material-UI，但它没有给出加载外部文件的答案。

【问题讨论】：

How to use an SVG file in a SvgIcon in Material-UI的可能重复
我已经检查过了，但它没有给出加载外部文件的答案。

标签： reactjs material-ui

【解决方案1】：

无法使用 Path 加载外部 svg。您应该根据github中的answer在de <Icon>中使用<img />：

在'@Christos-Lytras' answer there is an example中了解如何操作

【讨论】：

【解决方案2】：

你可以将 svg 图标作为一个 react 组件导入，并使用这个组件包裹在 SvgIcon 组件中：

import { ReactComponent as Car } from './icons/car.svg'
...
<SvgIcon>
  <Car />
</SvgIcon>

【讨论】：