Javascript 如何在大型应用程序中导入和使用图标？

我有一个React应用程序，它使用了很多React图标。我已经想到了导入和使用它们的不同方法，但我不确定是否应该考虑对性能有任何重大影响。


1。导入我的顶级

应用程序中的所有图标

组件，并根据需要将它们传递给每个组件。

这就是我现在正在做的，我认为我只导入了SVG一次，但是通过高阶和子组件向下传递这些图标变得很烦人

从'./icons/material/plant.svg'导入{ReactComponent as iconpartment}；
从“./icons/material/bookmark.svg”导入{ReactComponent as IconBookmark}；
从“./icons/material/calendar today.svg”导入{ReactComponent as IconCalendarToday}；
//等等。
常量图标={
公寓：，
书签：，
日历：，
};
返回(
):

2。我可以在每个需要图标的组件中导入图标。

这是有道理的，但我担心很多组件使用相同的图标，对每个组件重复相同的导入似乎会适得其反

MyComponent

import { ReactComponent as IconApartment } from './icons/material/apartment.svg';

return (
  <div>{<IconApartment />}</div>
);

import { ReactComponent as IconApartment } from './icons/material/apartment.svg';

return (
  <div>{<IconApartment />}</div>
);

import { useIcons } from './hooks.js';

const { icons } = useIcons();

return (
  <div>{icons.apartment}</div>
);

从'./icons/material/plant.svg'导入{ReactComponent as iconpartment}；
返回(
{}
);

MyOtherComponent

import { ReactComponent as IconApartment } from './icons/material/apartment.svg';

return (
  <div>{<IconApartment />}</div>
);

import { ReactComponent as IconApartment } from './icons/material/apartment.svg';

return (
  <div>{<IconApartment />}</div>
);

import { useIcons } from './hooks.js';

const { icons } = useIcons();

return (
  <div>{icons.apartment}</div>
);

从'./icons/material/plant.svg'导入{ReactComponent as iconpartment}；
返回(
{}
);

3。我可以做一个定制挂钩。

它基本上执行选项1，但我可以单独实例化它，而不是作为道具传递给子组件

定制挂钩

import { ReactComponent as IconApartment } from './icons/material/apartment.svg';
import { ReactComponent as IconBookmark } from './icons/material/bookmark.svg';
import { ReactComponent as IconCalendarToday } from './icons/material/calendar-today.svg';
// etc.

export function useIcons() {

  const icons = {
    apartment: <IconApartment />,
    bookmark: <IconBookmark />,
    calendar: <IconCalendar />,
  };

  return icons;
}

从'./icons/material/plant.svg'导入{ReactComponent as iconpartment}；
从“./icons/material/bookmark.svg”导入{ReactComponent as IconBookmark}；
从“./icons/material/calendar today.svg”导入{ReactComponent as IconCalendarToday}；
//等等。
导出函数usecons（）{
常量图标={
公寓：，
书签：，
日历：，
};
返回图标；
}

MyComponent

import { ReactComponent as IconApartment } from './icons/material/apartment.svg';

return (
  <div>{<IconApartment />}</div>
);

import { ReactComponent as IconApartment } from './icons/material/apartment.svg';

return (
  <div>{<IconApartment />}</div>
);

import { useIcons } from './hooks.js';

const { icons } = useIcons();

return (
  <div>{icons.apartment}</div>
);

从'/hooks.js'导入{useIcons}；
const{icons}=useIcons（）；
返回(
{icons.partment}
);

--

---

最有效的解决方案是什么？什么是最佳实践？

这主要是一个宗教争论。就我个人而言，我更喜欢避免创建依赖链，因为它增加了不必要的复杂性，所以扩展性较差。这是从顶层传播道具的固有问题。出于两个原因，我更喜欢在每个将使用该模块的组件中使用该模块。1） 在重新排列组件层次结构时，不可能打乱依赖链，2）添加到需要它的组件非常简单和容易。这基本上就是我的感觉，这是选项2。这与我们导入和使用其他JS模块的方式是一致的。我想我只是被困在支柱钻井和如何反应是使用。无视枯燥的原则只会让人觉得肮脏。然而，如果有性能方面的好处，我可以被说服，这就是我希望了解的。是的。当使用这两种方法时，没有明显的性能差异。这取决于你！