Is there a significant performance difference between importing an object that maps icons and importing icons individually?

Question

My team is using @mui/icons-material in our React project and we're currently importing the same icons to represent the same things in many different components.

Component A

import { Group as IconGroup, Person as IconPerson } from '@mui/icons-material';

return <div>...<IconPerson />...<IconGroup /></div>;

Component B

import { Group as IconGroup, Person as IconPerson } from '@mui/icons-material';

return <div>...<IconPerson />...<IconGroup /></div>;

I'm thinking of creating an object that maps all of our icons and referencing that instead.

icons.ts

import { Group as IconGroup } from '@mui/icons-material';
import { Person as IconPerson } from '@mui/icons-material';

export const icons = {
  collection: <IconGroup />,
  user: <IconPerson />,
}

Component A

import { icons } from 'icons';

return <div>...{icons.user}... {icons.collection}</div>;

Component B

import { icons } from 'icons';

return <div>...{icons.user}... {icons.collection}</div>;

The advantage is that if we ever want to move away from @mui/icons-material or just change an icon, we only need to change it in one place and it would be reflected across all components.

But I am concerned importing a rather large object into so many components may degrade performance. I'm not sure how ESM modules handle that, or if that's even a consideration.

In terms of performance, is it better to import the icons individually? Is there a significant difference when importing a shared object that maps them to keys?