如何在Next.js中动态加载m个图标？

Question

我不知道是否值得，但我会动态加载这些图标。

import {
  faCheck,
  faCogs,
  faCoins,
  faCouch,
  faCreditCard,
  faGhost,
  faGift,
  faPuzzlePiece,
  faQrcode,
  faTasks,
  faVideo,
  faChild,
  faCubes,
} from "@fortawesome/free-solid-svg-icons";

我试过加载一个：

import dynamic from "next/dynamic";
const faCalendar = dynamic(
  async () => (await import("@fortawesome/free-solid-svg-icons")).faCalendar
);

但它引发错误：

Type error: Argument of type '() => Promise<IconDefinition>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
  Type '() => Promise<IconDefinition>' is not assignable to type '() => LoaderComponent<{}>'.
    Type 'Promise<IconDefinition>' is not assignable to type 'LoaderComponent<{}>'.
      Type 'IconDefinition' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
        Property 'default' is missing in type 'IconDefinition' but required in type '{ default: ComponentType<{}>; }'.

  20 | import dynamic from "next/dynamic";
  21 | const faCalendar = dynamic(
> 22 |   async () => (await import("@fortawesome/free-solid-svg-icons")).faCalendar
     |   ^
  23 | );
  24 | 
  25 | import { Translation } from "../../tikexModule/Types";

你知道哪里出了问题吗？

Answer 1

您正在尝试使用该库中的 SVG 图标定义，就好像它们是 React 组件一样，但事实并非如此。 next/dynamic 仅适用于组件。

其次，延迟加载图标定义可能不值得，因为 import("@fortawesome/free-solid-svg-icons") 需要导入完整的模块才能从中提取单个图标，而 import { ... } from ... 可以做到tree-shaking，你只会包含你实际使用的图标的图标定义。

如何在Next.js中动态加载m个图标？

How to load m bunch of icons dynamically in Next.js?

reactjs

next.js

code-splitting