标签: react-icons

我有一个侧边栏组件，其列表项是在地图函数内部生成的（从 api 获取的电影类型）。我希望每种电影类型旁边都有一个不同的图标，但无法找到一种方法来为地图功能的每次运行创建不同的图标。

我的想法是第一：按照我希望显示的顺序制作一个我想要显示的图标的数组。

 const icons = [
    "AiOutlineHome ",
    "FaUserNinja",
    "GiSwordman",
    "GiBabyFace",
    "FaLaughBeam",
    "GiPistolGun",
    "GiPineTree",
    "GiDramaMasks",
    "GiFamilyHouse",
    "GiElfEar",
    "GiScrollUnfurled",
    "GiScreaming",
    "GiMusicalNotes",
    "GiMagnifyingGlass",
    "FaRegKissBeam",
    "GiMaterialsScience",
    "GiHalfDead",
    "GiGreatWarTank",
    "GiCowboyBoot",
  ];

然后在我的地图函数中为每个列表项生成不同的图标

{movieGenres.map((genre) => {
            return (
              <li key={genre.id} className="nav-text">
                <button
                  className="genre-btn"
                  onClick={() => genreSelectionHandler(genre.id)}
                >
                  *<GENERATE ICON HERE />*
                  <span className="nav-item-title">{genre.name}</span>
                </button>
              </li>
            );
          })}

是否可以务实地创建这样的组件？这样，如果我想要不同的图标，我可以避免单独创建每个列表项。

我正在使用打字稿和反应开发一个个人网站，对于我的页脚，我通过一组对象进行映射，每个对象都有一个 url 属性以及一个图标属性。Icon 属性应该有多个不同的 React Icon 作为值，以便通过每次迭代，我可以显示不同的 Icon。当我最初在 javascript 中实现此功能时，我的代码运行得很好，但是在将我的代码库切换到 typescript 后，我​​遇到了以下错误：

“解析错误：'>'预期。eslint 'FaGithub'引用一个值，但在这里被用作类型。您的意思是'typeof FaGithub'吗？ts(2749)”

这是我迄今为止的打字稿实现。我尝试删除尖括号，这消除了错误，但在映射数组时无法实际显示图标。我真的很感激任何建议。

const socialIcons: { icon: IconType, url: string }[] = [
    {
        icon: <FaGithub />,
        url: "./"
    },
    {
        icon: <FaLinkedin />,
        url: "./"
    },
    {
        icon: <FaTwitter />,
        url: "./"
    },
    {
        icon: <FaInstagram />,
        url: "./"
    },
    {
        icon: <FaFacebook />,
        url: "./"
    },
]

{socialIcons.map((icons, index) => {
                    const {icon, url} = icons;
                    return (
                        <a href={url} key={index} target="_blank" rel="noopener noreferrer">
                            {icon} …

如何将图标与文本对齐到同一水平。截至目前，我看到图标位于文本的上方。我尝试使用padding-top: 5pxand ，margin-top: 5px但这似乎没有按预期工作。

  <Box>
    <Typography variant="h2">
      Photography <FaCamera />
    </Typography>
  </Box>

我使用Stackblitz创建了一个工作示例。有人可以帮忙吗？

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

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

我刚刚安装了反应图标并尝试导入图标，但出现此错误。

./node_modules/react-icons/fa/index.esm.js
Module not found: Can't resolve '../lib' in 
'/Users/nathanbarry/Programming/personalsite/node_modules/react-icons/fa'

我查看了 node_modules 中的包，那里有一个 lib 文件夹。

我尝试过重新安装它，但没有成功。可能是什么问题以及如何解决它？