如何根据数据库中的字符串呈现反应图标？答案

【问题标题】：How to render react-icon depending on String from Database?如何根据数据库中的字符串呈现反应图标？
【发布时间】：2021-04-11 01:40:16
【问题描述】：

我正在尝试创建多个包含信息的框，并且每个框都有一个图标。现在我已经硬编码如下：

<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 组件来实现它？我应该使用其他东西还是有可能？

【问题讨论】：

标签： reactjs chakra react-icons

【解决方案1】：

你如何导入你的图标？我会从 DB 使用 base64 方式在前端显示它，因为我看不到在不重新构建 React 前端的情况下动态导入它们...

【讨论】：

【解决方案2】：

您可以创建自定义组件，但您需要将它们全部导入。

这里是带有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>
  );
}

【讨论】：

如果我只有一个按钮（组件）我必须创建所有按钮，如何添加名称？
我不明白你的意思。你能澄清一下吗？