如何在动态导入中使用样式化组件

Question

我试图找到一种方法来动态导入继承一些标准样式的svg图标。我没有看到其他人写这个...所以我想我走错了路。

我尝试过在样式化的组件中创建一个SVG包装器，但这给了我一个svg的巢

SVG图标代码

export { ReactComponent as default } from './logo.svg';

我的图标代码

const TestStyle = styled.svg`
  height: 1rem;
  width: 1rem;
  display: inline-block;
`
const Icon: React.FC<IconProps> = ({ name }: IconProps): React.ReactElement => {
  const DynamicIcon = lazy((): Promise<any> => import(`../../assets/icons/${name}.tsx`));
  return (
    <Suspense fallback={<div>Loading ...</div>}>
      <DynamicIcon />
    </Suspense>
  );
};

导入正在工作并显示，但我希望将组件作为样式化组件，这将使我能够使用道具设置主题并动态更改SVG样式。