Блог

Главная - Вопросы по программированию - Ленивая загрузка SVG с помощью CRA

Ленивая загрузка SVG с помощью CRA

#reactjs #svg #lazy-loading #create-react-app

Вопрос:

Я хочу лениво загружать SVG с помощью CRA, но, черт возьми, я застрял и нуждаюсь в вашей помощи.

Я пытаюсь сделать что-то вроде этого:

 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";

Но такой вид деструктурирования не работает с ленивыми.

Пожалуйста, помогите!

Ответ №1:

чтобы деструкция работала с lazy, вы можете по умолчанию экспортировать ее из отдельного файла, как показано ниже

 // 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

Метки: