如何导入已经从ReactJS中的另一个文件导入的图标

Question

我有一个 data.js 文件，其中存储了一些信息。我想存储一个从此文件导入的图标，并能够从另一个文件访问它以显示该图标。我该怎么办？

data.js

import HomeIcon from '@material-ui/icons/Home';

const navigation = [
    {
        title: 'Home',
        icon: HomeIcon,
    },
];

export { navigation };

myComponent.js

import { navigation } from 'Src/api/data';

const NavBar = () => {
    const Icon = navigation[0].icon;

    return <Icon/>;
};

export default NavBar;

我如何使其工作？