Question

有没有一种方法可以使用Class template argument deduction根据json文件动态导入svg图标？这是我的json文件的示例：

[
  {
    "name": "home",
    "icon": "Home",
    "title": "Home"
  },
  {
    "name": "business",
    "icon": "Business",
    "title": "Business"
  },
  {
    "name": "apartment",
    "icon": "Apartment",
    "title": "Apartment"
  }
]

我想映射此json以创建带有图标的菜单列表

Answer 1

// json 示例：

const dynamicIcon: { [key: number]: React.ReactElement<SvgIconProps> } = {
  home: <Home />,
  business: <Business />,
  apartment: <Apartment />,
};

// 代码用法：

 <Box>
  { dynamicIcon['home'] }
 </Box>

Answer 2

对于那些需要相同的人，我创建了一个带有图标列表的自定义图标组件

import ApartmentIcon from '/path/to/icon';
import BusinessIcon from '/path/to/icon';
import HomeIcon from '/path/to/icon';

const IconList = {
  apartment: ApartmentIcon,
  business: BusinessIcon,
  home: HomeIcon,
}

const Icon = ({ icon, ...props }) => {
    const Component = Icons[icon];
    return <Component {...props} />;
};

export default Icon;

这样我就可以导入Icon组件，然后映射json得到图标

menuJson.map((menuItem) => <Icon icon={menuItem.name} />)

如果您需要其他实施方面的帮助，请随时与我们联系

动态图标与材质ui图标一起导入

2 个答案: