我找到了一个解决问题的方法。我的方法与**@canda**的方法相似。

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import Select, { components } from "react-select";

const options = [
  { value: "England", label: "England", icon: "england.svg" },
  { value: "Germany", label: "Germany", icon: "germany.svg" }
];

const { Option } = components;
const IconOption = props => (
  <Option {...props}>
    <img
      src={require('./' + props.data.icon)}
      style={{ width: 36 }}
      alt={props.data.label}
    />
    {props.data.label}
  </Option>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Select
        defaultValue={options[0]}
        options={options}
        components={{ Option: IconOption }}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

如果有人想在react-select中使用具有多个选择的图标，可以使用以下代码：

const { MultiValue } = components;

const MultiValueOption = (props) => {
  return (
    <MultiValue {...props}>
      <img
        src={require("./" + props.data.icon)}
        style={{ width: 36 }}
        alt={props.data.label}
      />
      <span>{props.data.value}</span>
    </MultiValue>
  );
};

<Select
  options={options}
  components={{
    Option: IconOption,
    MultiValue: MultiValueOption,
  }}
  isMulti={true}
></Select>;

我认为问题是你实际上并没有导入SVG。如果你试图在代码中直接使用<IconFlagGermany/>，它会崩溃并显示以下消息：
元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
它目前没有崩溃，因为我认为你的customSingleValue函数没有按照你的意图工作（没有调查过它，但很肯定它被窃听了）。
如果你想以这种方式导入SVG，你需要在Webpack（或你选择的bundler）中设置一个合适的加载器。可能是这样的：https://www.npmjs.com/package/react-svg-loader
然而，另一种解决方案是正确地将SVG导出为组件，就像从代码中派生的这个演示一样：https://stackblitz.com/edit/react-5gvytm

这是我在@Penny Liu的帮助下做的

import React from 'react';
import Select, { components } from 'react-select';
import { ReactComponent as MyIcon } from './my-icon.svg';

const options = [
  {
    value: 'hello',
    label: 'Hello',
    Icon: MyIcon,
  },
  // ...
];

const { Option } = components;

function IconOption(props: any) {
  const {
    data: { label, Icon },
  } = props;

  return (
    <Option {...props}>
      <div className="flex items-center gap-2">
        {Icon && <Icon />}
        <span>{label}</span>
      </div>
    </Option>
  );
}

export default function App() {
  return (
    <Select
      options={options}
      components={{ Option: IconOption }}
      // ...
    />
  );
}

这个方法也奏效了

<SelectComponent
  options={options}
  getOptionLabel={(props: any) => {
    const { Icon, label } = props;
    return (
      <div tw="flex items-center gap-2">
        {Icon && <Icon />}
        <span>{label}</span>
      </div>
    ) as unknown as string;
  }}
/>