如何通过动态导入使用样式组件

Question

我正在尝试找到一种方法来动态导入继承一些标准样式的 svg 图标。我还没有看到其他人写过这个……所以我认为我走错了路。

我尝试在样式组件中创建 SVG 包装器，但这给了我一个 svg > svg > 路径的嵌套，我不确定这是否是正确的想法。我想避免使用内联样式，以防以后出现特殊性问题。

SVG 图标代码 <-- 使用 Create React App 我将 svg 导出为默认的 React 组件

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

我的图标代码 <-- styled.svg 是我想与 DynamicIcon 合并的东西...有没有办法做像 DynamicIcon 作为 TestStyle 的事情？<-- 在文档中， as 用于更改标签类型，所以我认为这是不对的？

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 样式。

Answer 1

\xe2\x84\xb9 - 我的 TypeScript foo 很弱，所以下面将使用 vanilla JS

\n\n

您可以简单地用 包裹动态加载的组件styled(DynamicIcon)。\n参考：扩展样式文档

\n\n

// Instead of \n// const TestStyle = styled.svg`\n//   height: ${props => props.size};\n//   width: ${props => props.size};\n//   display: inline-block;\n// `;\n\nconst Icon = ({ name, iconSize }) => {\n  const DynamicIcon = lazy(() => import(`./icons/${name}.jsx`));\n  // ...  Wrap the dynamically loaded component in `styled()`.\n  const StyledIcon = styled(DynamicIcon)`\n    height: ${props => props.size}px;\n    width: ${props => props.size}px;\n    display: inline-block;\n  `;\n\n  return (\n    <Suspense fallback={<div>Loading ...</div>}>\n      <StyledIcon size={iconSize} />\n    </Suspense>\n  );\n};\n\n

\n\n

\xe2\x9a\xa0 \n但请注意，上面的 using 用法prop.size并不是一个好主意，因为它为每个宽度/高度创建了多个类。
\n(我试图绕过它，.attrs但无法让它工作，但我发现它超出了这个问题的范围，并将其留给你）

\n\n

\n\n

在这里查看分叉演示。
\n

\n\n

这是徽标包裹在样式组件中的样子
\n

\n