如何解决如何根据数据库中的字符串呈现反应图标?
我正在尝试创建多个包含信息的框,并且每个框都有一个图标。现在我已将其硬编码如下:
<Box p={10} borderRadius='lg' bg={colorMode === 'light' ? 'gray.300' : 'gray.700'}>
<Stack spacing={5}>
<Box mt={5}>
<IconContext.Provider value={{size: '10vh'}}>
<div>
<IologoJavascript/>
</div>
</IconContext.Provider>
</Box>
<Box><heading>JS & TS</heading></Box>
<Progress size="lg" value={75} hasstripe isAnimated/>
</Stack>
</Box>
现在,为了能够动态添加更多这些组件,我想实现一个数据库。 大多数情况下这很容易,我只是不知道如何使用 react-icons 组件来实现它? 我应该使用其他东西还是可能?
解决方法
您可以创建自定义组件,但需要将它们全部导入。
这是一个带有 fa
图标的示例:
import React from "react";
import "./styles.css";
import * as Icons from "react-icons/fa";
/* Your icon name from database data can now be passed as prop */
const DynamicFaIcon = ({ name }) => {
const IconComponent = Icons[name];
if (!IconComponent) { // Return a default one
return <Icons.FaBeer />;
}
return <IconComponent />;
};
export default function App() {
return (
<div className="App">
<DynamicFaIcon name="FaAngellist" />
<DynamicFaIcon />
</div>
);
}
,
你如何导入你的图标? 我会从 DB 中使用 base64 方式在前端显示它,因为我认为没有办法在不重新构建 React 前端的情况下动态导入它们...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。