React 图标动态生成字体真棒组件

Posted 2023-02-21

【中文标题】React 图标动态生成字体真棒组件

【英文标题】：React icons dynamically generate font awesome component

【发布时间】：2021-10-02 00:16:34

【问题描述】：

我在我的 react 应用程序中使用 react-icons 包。从某种意义上说，它可以正常工作，您可以通过以下方式导入和使用字体真棒图标：

import  FaTag  from 'react-icons/fa';
...
<FaTag />

但是，我希望能够在更可重用的组件中生成这些图标。例如，支持我有一个菜单列表，每个项目都有一个图标。该列表作为数组发送，其中一项是标题，一项是链接地址，一项是图标名称。没有动态方法，你必须这样做......

const SidebarMenuItem:FC<propsObj> = (title, link, icon):ReactElement => 

  return (

    <li>
      <Link to=link>
        <span>title</span>
         (icon==="Tag") && <FaTag /> 
         (icon==="QuestionCircle") && <FaQuestionCircle /> 
         (icon==="UserAstrounaut") && <FaUserAstronaut /> 
         (icon==="InfoCircle") && <FaInfoCircle /> 
         (icon==="List") && <FaList /> 
         (icon==="Cogs") && <FaCogs /> 
      
      </Link>

    </li>

  )


export default SidebarMenuItem;

我希望能够在某种程度上动态地做到这一点。我对包含我需要使用的每个图标的大型导入语句没有问题。之后我想做的就是这个……

const SidebarMenuItem:FC<propsObj> = (title, link, icon):ReactElement => 

  const iconElement = React.createElement(icon, null);

  return (

    <li>
      <Link to=link>
        <span>title</span>
        <div>iconElement</div>         
      </Link>
    </li>

  )


export default SidebarMenuItem;

这实际上会导致正确的组件被渲染。但是，没有图标出现，也没有 svg 图形。看来是在编译过程的某个地方，font awesome 包在运行 create 组件之前渲染了图形？

有没有办法解决这个问题？

【问题讨论】：

如果您有一个 JSON 文件或数据源以及您的应用程序的页面/组件，您是否可以创建一个将图标映射到适当项目的枚举类，然后通过 IconEnum.title 调用它.这行得通吗？

【参考方案1】：

我猜你正在使用一个模块捆绑器，它智能地只包含你在代码中使用过的文件（如 webpack）。有关详细信息，请参阅tree shaking。

如果你只是想绕过制作一个需要图标的组件，你可以简单地通过 props 注入它：

const SidebarMenuItem:FC<propsObj> = (title, link, IconComponent):ReactElement => 
  return (
    <li>
      <Link to=link>
        <span>title</span>
        <IconComponent />        
      </Link>
    </li>

  )


export default SidebarMenuItem;

// use this like so:
import  FaTag  from 'react-icons/fa';
//... somewhere in render
<SidebarMenuItem title="the title" link="http://google.com" icon=FaTag />

这并没有摆脱import 语句，但由于像 vscode 这样的 IDE 会在您编码时自动插入导入（如果配置正确），我认为这没什么大不了的。它还使您的模块捆绑器实际上只包含您使用的图标。

【参考方案2】：

你可以制作一个像这样的组件数组

import React from 'react'
import  FaTag, FaList  from 'react-icons/fa'

const components = 
    FaTag,
    FaList,


function SidebarMenuItem(title, link, icon) 
    //given that icon contains 'Tag' or 'List'
    const Icon = components[`Fa$icon`]
    return (
       <li>
         <Link to=link>
           <span>title</span>
           <Icon />         
         </Link>
       </li>
    )