如何在TypeScript中联合使用TablerIcons与IconDefinition类型

问题根源 #

你遇到的类型错误是因为 TablerIcon 是React组件类型（可直接作为JSX元素渲染），而 IconDefinition 是FontAwesome的图标定义对象，并非可直接渲染的React组件。直接将 IconDefinition 传入期望接收React组件/元素的 icon 属性，TypeScript会判定其不具备构造或调用签名，从而抛出错误。

解决步骤 #

1. 补全FontAwesome依赖导入 #

首先需要导入FontAwesome的React渲染组件，用来将 IconDefinition 转换为可渲染的JSX元素：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

2. 封装统一图标渲染组件 #

创建一个通用的图标封装组件，自动识别传入的图标类型并选择对应的渲染方式：

import { TablerIcon } from "tabler-icons-react";
import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// 定义支持的图标类型联合
type SupportedIcon = TablerIcon | IconDefinition;

export const NavIcon = ({ icon, size = 16, ...props }: { icon: SupportedIcon; size?: number; [key: string]: any }) => {
  // 类型守卫：判断是否为FontAwesome图标定义
  if ("iconName" in icon) {
    return <FontAwesomeIcon icon={icon} size={size} {...props} />;
  }
  // 渲染Tabler图标组件
  const TablerComponent = icon;
  return <TablerComponent size={size} {...props} />;
};

3. 自定义导航链接组件（适配类型） #

扩展Mantine的 NavbarLinkProps，并使用封装的 NavIcon 来处理图标渲染：

import { NavbarLink, NavbarLinkProps } from "@mantine/core";
import { SupportedIcon } from "./NavIcon"; // 导入上面定义的类型

// 自定义导航链接Props，替换原有的icon类型
type CustomNavbarLinkProps = Omit<NavbarLinkProps, "icon"> & {
  icon?: SupportedIcon;
};

export const CustomNavbarLink = ({ icon, ...props }: CustomNavbarLinkProps) => {
  return (
    <NavbarLink
      {...props}
      icon={icon ? <NavIcon icon={icon} /> : undefined}
    />
  );
};

4. 使用自定义导航链接 #

现在可以直接传入两种类型的图标，无需额外处理：

import { Home2, Gauge } from "tabler-icons-react";
import { faGithub, faBitcoin } from "@fortawesome/free-brands-svg-icons";
import { CustomNavbarLink } from "./CustomNavbarLink";

// 在导航栏中使用
<CustomNavbarLink icon={Home2} label="首页" />
<CustomNavbarLink icon={Gauge} label="仪表盘" />
<CustomNavbarLink icon={faGithub} label="GitHub" />
<CustomNavbarLink icon={faBitcoin} label="比特币" />

替代方案（无需封装组件） #

如果不想封装组件，也可以在使用时直接转换FontAwesome图标：

import { NavbarLink } from "@mantine/core";
import { Home2 } from "tabler-icons-react";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

<NavbarLink icon={<Home2 />} label="首页" />
<NavbarLink icon={<FontAwesomeIcon icon={faGithub} />} label="GitHub" />

这种方式虽然直接，但每次使用FontAwesome图标都需要手动包裹，代码冗余度较高，推荐使用封装组件的方案。

内容的提问来源于stack exchange，提问作者PhilBrk8