如何在Next.js中正确动态加载@fortawesome/free-solid-svg-icons图标？

next/dynamic是专门为动态加载React组件设计的API，入参要求返回的是React组件类型，或是default导出为React组件的模块。而@fortawesome/free-solid-svg-icons导出的图标都是IconDefinition类型的普通配置对象，不属于React组件，不符合next/dynamic的入参类型要求，所以触发了上述报错。

不需要用到next/dynamic，直接用原生ES动态导入语法即可实现图标按需加载：

// 单独封装异步加载图标的方法
const loadFaCalendar = async () => {
  const iconModule = await import("@fortawesome/free-solid-svg-icons");
  return iconModule.faCalendar;
};

// 组件内使用示例
import { useState, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { IconDefinition } from "@fortawesome/fontawesome-common-types";

const DemoComponent = () => {
  const [calendarIcon, setCalendarIcon] = useState<IconDefinition | null>(null);

  useEffect(() => {
    // 组件挂载后异步加载图标
    loadFaCalendar().then(icon => setCalendarIcon(icon));
  }, []);

  return calendarIcon ? <FontAwesomeIcon icon={calendarIcon} /> : null;
};

如果你用的是支持tree-shaking的打包工具，只要不批量导入不需要的图标，打包时会自动剔除未使用的图标资源，不需要额外做手动动态加载也能控制打包体积。

内容的提问来源于stack exchange，提问作者János