在材料ui中，从静态服务器的svg图像/ URL加载svg的路径

Question

在搜索如何在材质ui中显示自定义svg图像时，它通常可以归结为以下代码：

const MyIcon = (props) => (
  <SvgIcon {...props}>
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </SvgIcon>
);
(props) => {
    return <div><MyIcon color={"secondary"}/></div>;
}

但是，这直接将路径数据放入svg图标。由于svg可能很大，因此我希望它不驻留在代码内。

因此svg映像位于服务器上的映像中，从根目录作为MyIcon.svg

然后我可以手动显示它：

(props) => {
    return <div><img src={"MyIcon.svg"}/></div>;
}

但是，这不允许我修改通常可以使用svg图像进行的颜色设置。

那么我如何才能将外部图像“加载为” react / material ui所理解的SvgIcon？