为Icons对象配置TS类型以实现SvgIcon组件属性自动补全

核心问题原因 #

你用Record<string, () => JSX.Element>定义Icons类型时，TypeScript会将对象的具体键名抹平成宽泛的string类型，丢失了键名的字面量信息，自然无法触发自动补全。如果keyof typeof Icons没生效，大概率是你给Icons加了显式的宽泛类型约束，覆盖了自动推导的字面量类型。

快速解决自动补全问题 #

1. 保留Icons的自动推导类型 #

不要给Icons对象加Record<string, ...>这类显式类型，让TypeScript自动推导包含具体键名的类型：

// 正确写法：无显式类型，TypeScript自动推导键名
const Icons = {
  Home: () => <svg viewBox="0 0 24 24">{/* 图标路径 */}</svg>,
  User: () => <svg viewBox="0 0 24 24">{/* 图标路径 */}</svg>,
  Settings: () => <svg viewBox="0 0 24 24">{/* 图标路径 */}</svg>,
};

2. 定义精确的IconName类型 #

用keyof typeof Icons提取Icons的所有键名，作为图标名称的约束类型：

type IconName = keyof typeof Icons;

3. 编写Icon组件并应用类型 #

在Icon组件的props中使用IconName，就能获得完整的键名自动补全：

interface IconProps {
  name: IconName;
  // 可添加通用props，比如尺寸、颜色
  size?: number;
  color?: string;
}

export const Icon = ({ name, size = 24, color = 'currentColor' }: IconProps) => {
  const IconComponent = Icons[name];
  // 将通用props传递给图标组件（需确保图标组件支持这些props）
  return <IconComponent size={size} color={color} />;
};

更优写法：可扩展的图标组件方案 #

1. 拆分单个图标组件 #

将每个图标拆成独立组件，统一接收通用props，便于维护和复用：

// icons/HomeIcon.tsx
interface IconBaseProps {
  size?: number;
  color?: string;
}

export const HomeIcon = ({ size = 24, color = 'currentColor' }: IconBaseProps) => (
  <svg width={size} height={size} fill={color} viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </svg>
);

// icons/UserIcon.tsx
export const UserIcon = ({ size = 24, color = 'currentColor' }: IconBaseProps) => (
  <svg width={size} height={size} fill={color} viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
  </svg>
);

2. 统一聚合图标 #

在icons/index.ts中导入所有图标，形成Icons对象：

import { HomeIcon } from './HomeIcon';
import { UserIcon } from './UserIcon';
import { SettingsIcon } from './SettingsIcon';

export const Icons = {
  Home: HomeIcon,
  User: UserIcon,
  Settings: SettingsIcon,
};

3. 编写类型安全的通用Icon组件 #

利用React.ComponentProps自动推导图标组件的props，确保类型完全匹配：

import { Icons } from './icons';

type IconName = keyof typeof Icons;
// 自动合并图标名称和对应组件的props
type IconProps = { name: IconName } & React.ComponentProps<typeof Icons[IconName]>;

export const Icon = ({ name, ...rest }: IconProps) => {
  const IconComponent = Icons[name];
  return <IconComponent {...rest} />;
};

这样使用时，不仅能自动补全图标名称，还能获得对应组件的props提示：

// 自动补全"Home"|"User"|"Settings"，且提示size、color等props
<Icon name="Home" size={28} color="#333" />

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