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

在material-ui的SvgIcon中加载外部svg文件，可以通过以下步骤实现：

1. 首先，将外部的svg文件保存在项目的某个目录下，例如src/assets/icons。
2. 在React组件中引入SvgIcon组件和外部svg文件。可以使用import语句导入SvgIcon组件，并使用require语句导入外部svg文件。例如：

import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';

const MyIcon = (props) => (
  <SvgIcon {...props}>
    <path d={require('../assets/icons/my-icon.svg')} />
  </SvgIcon>
);

export default MyIcon;

1. 在SvgIcon组件中，使用path元素来加载外部svg文件。通过require语句引入外部svg文件，并将其作为d属性的值传递给path元素。注意，这里使用了spread操作符{...props}将传递给MyIcon组件的属性传递给SvgIcon组件。
2. 在应用中使用MyIcon组件。可以像使用其他material-ui图标一样使用MyIcon组件，例如：

import React from 'react';
import MyIcon from './MyIcon';

const App = () => (
  <div>
    <MyIcon color="primary" />
  </div>
);

export default App;

这样，就可以在material-ui的SvgIcon中加载外部svg文件了。请注意，上述代码中的路径和组件名称仅作为示例，实际使用时需要根据项目的目录结构和文件名进行相应的调整。

关于material-ui的SvgIcon组件和外部svg文件的加载，腾讯云提供了一系列相关产品和服务，例如腾讯云对象存储（COS）用于存储外部svg文件，腾讯云CDN用于加速文件的分发，腾讯云API网关用于管理和调用API等。具体的产品和服务选择可以根据项目需求和实际情况进行决策。