在具有大图标文件的节点中实现树的最佳方法

Question

构建一个拥有自己图标的组件库。它将在 nextjs 项目中使用。

现在包含所有图标的文件如下所示：

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 0 0 43-42 0c-7  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-157-54-54z 5 5-14 0-20l-33-33c-6-5-15-5-20 0l-27 26 54 54z" />
    ),
    'switch-horizontal': (
        <path d="m190 254l28-28-58-58 244 0c11 0 20-9 20-20 0-11-9-20-20-20l-245 0 45-44 14-14-28-27-13 13-92 92z m117 194l14-14 92-91-27 28 58 58-226 0c-11 0-19 9-19 20 0 10 8 19 19 19l226 0-45 45-13 14 27 27z" />
    ),
// 200+ icons
} as const;

然后像这样导入和使用：

import { Icons } from './Icons';

export const SvgIcon = ({ className, iconName, disabled, dataTest}: SvgIconProps) => {
    const Icon = Icons[iconName];
    return (
        <svg
            {...{
                xmlns: 'http://www.w3.org/2000/svg',
                disabled,
                viewBox: '0 0 512 512',
                className,
                'data-test': dataTest || 'svg-icon',
            }}>
            {Icon}
        </svg>
    );
};

构建完成后，我可以看到每个都变得纯净：

在性能和树摇动方面，这可以以更有效的方式完成吗？

Answer 1

[输入我在此处输入链接描述在此处输入法师描述]2

在此输入代码

`

-

---

在此输入图片描述