使用CRA延迟加载SVG

Question

我想用CRA懒惰地加载SVG，但是我被卡住了，需要你的帮助。

我正在尝试这样做：

const LoadIcon = (name) => lazy(() => import(`../icons/${name}.svg`));

const SvgComponent = ({ icon }) => {
  const Icon = LoadIcon(icon);
  console.log("Icon ", Icon);
  return <Icon />;
};

值得一提的是，我确实尝试了官方CRA的建议(没有延迟加载)：

import { ReactComponent as Icon } from "../icons/myCoolSvg.svg";

但是这种解构不适用于lazy。

请帮帮我！

Answer 1

对于使用惰性的析构，您可以默认将其从单独的文件中导出，如下所示

// Middle Component
import { ReactComponent as Icon } from "./github.svg";

export default Icon;

然后在您的组件中延迟调用它

const MiddleComponent = lazy(() => import(`./MiddleComponent`));
const Svg = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MiddleComponent />
    </Suspense>
  );
};

点击此处查看演示- https://codesandbox.io/s/react-lazy-svg-loading-gi2ru