如何在 Next.js 中动态加载 m 组图标？答案

【问题标题】：How to load m bunch of icons dynamically in Next.js?如何在 Next.js 中动态加载 m 组图标？
【发布时间】：2021-10-10 18:48:13
【问题描述】：

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

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

你知道可能出了什么问题吗？

【问题讨论】：

标签： reactjs next.js code-splitting

【解决方案1】：

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

其次，无论如何延迟加载图标定义可能不值得，因为import("@fortawesome/free-solid-svg-icons") 需要导入完整模块以便您从中提取单个图标，import { ... } from ... 可以进行摇树，而您' d 只包含您实际使用的图标的图标定义。

【讨论】：