基于@heroicons封装Icon组件：类型定义与图标匹配问题

1. 生成图标名称的联合类型 #

利用TypeScript的keyof typeof操作符，直接提取IconsSolid或IconsOutline模块导出的所有图标名称，自动生成联合类型，无需手动枚举：

type IconName = keyof typeof IconsSolid;

由于Heroicons的solid和outline版本图标名称完全对应，这个类型可以同时约束两个变体的图标名称参数。

2. 根据名称动态渲染图标 #

将IconsSolid和IconsOutline视为包含图标组件的对象，通过图标名称作为索引获取对应组件，再进行渲染：

完整代码 #

import React from 'react';
export * as IconsSolid from '@heroicons/react/24/solid';
export * as IconsOutline from '@heroicons/react/24/outline';

// 生成图标名称联合类型
type IconName = keyof typeof IconsSolid;

interface IconProps extends React.SVGAttributes<SVGElement> {
  name: IconName;
  variant: 'solid' | 'outline';
}

export const Icon = ({ name, variant, className, ...props }: IconProps) => {
  // 根据变体和名称获取对应图标组件
  const IconComponent = variant === 'solid' 
    ? IconsSolid[name] 
    : IconsOutline[name];

  // 渲染图标组件，传递剩余属性
  return <IconComponent className={className} {...props} />;
};

使用示例 #

<Icon name="XMarkIcon" variant="solid" className="w-6 h-6 text-red-500" />
<Icon name="CheckIcon" variant="outline" className="w-5 h-5 text-green-600" />

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