我们正在添加TS支持，我很难获得此对象的正确类型：

export const Icons = {
    calendar: () => (
        <path d="m405 427c7 0 12-2 16-6 4-4 6-9 6-16l0-256c0-6-2-11-6-15-4-4-9-6-16-6l-42 0 0-43-64 0 0 43-86 0 0-43-64 0c-7 0-12 2-16 6-4 4-6 9-6 15l0 256c0 7 2 12 6 16 4 4 9 6 16 6z m-21-43l-256 0 0-149 256 0z" />
    ),
    edit: () => (
        <path d="m128 331l0 53 53 0 158 m252-146c5-5 5-14 0-20l-33-33c-6-5-15-5-20 0l-27 26 54 54z" />
    ), 
// ...many more
}

字符串
我已经manged让它与Record<string, () => JSX.Element>工作，但我想有所有不同的图标自动完成。
最后一个组件看起来像这样：

import { Icons } from './Icons';
    type SvgIconProps{
        iconName: string;
        disabled?: boolean;
        dataTest?: string;
    }
    export const SvgIcon = ({  iconName, disabled, dataTest}: SvgIconProps) => {
        const Icon = Icons[iconName];
        return (
            <svg
                {...{
                    disabled,
                    viewBox: '0 0 512 512',
                    'data-test': dataTest || 'svg-icon',
                }}>
                <Icon />
            </svg>
        );
    };

型
我试着这样得到钥匙：

type Keys = keyof typeof Icons;

型
然后给他们签名：

iconName: Keys;

型
但这并不给予我自动完成所有不同的图标，我们有。
例如，我使用这个组件<SvgIcon {...{iconName: "auto complete icon name plz"}} />
这个文件真的很旧了，我们正在转换为NextJs。也许有更好的方法来编写这样的组件？🤔
图片发给@丹尼尔：
x1c 0d1x的数据