Which of the options is more optimized for destructuring?

Question

React

React has the React-Icons module.
To get a specific icon, you need to do this: But sometimes the icon needs to be called dynamically, there is this option:
import { MdMailOutline } from "react-icons/md";

import * as MdIcon from "react-icons/md";

const Icon = MdIcon["MdLocalPhone"];

<Icon />

But with such an import, all icons are imported, does this affect performance?

Answer 1

This affects the final size of the bundle.
Webpack does tree shaking: only includes what was imported. In the first case, only one icon will be connected. In the second, everything, even if you use only one. Therefore, the first option is always preferable.