Question

我在React.js项目中有一个侧边栏元素数组，其中每个元素都表示为对象，除其他外，每个元素都有自己的FontAwesome图标，该图标定义为字符串，例如fa-phone。现在FontAwesome集成到React.js中存在一个问题；每个图标都必须根据其manual分别导入并添加到库中。

    import * as React from 'react';

    import { library } from '@fortawesome/fontawesome-svg-core'
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

    interface SidebarElement {
      fa: string,
      href: string,
      title: string
    }

    interface SidebarElements {
      elements: SidebarElement[]
    }

    export default class Sidebar extends React.Component<SidebarElements, {}> {
      render() {

        const elements = this.props.elements.map((element, key) => {

          // tweak icon name so it matches component name...?
          ...

          // the two lines below obviously won't work
          import { element.fa } from '@fortawesome/free-solid-svg-icons'
          library.add(element.fa);

          return (
            <li key={key} className="nav-item">
                <a className="nav-link" href={element.href}>
                    <FontAwesomeIcon icon={element.fa} />
                    <span>{element.title}</span>
                </a>
            </li>
          );
        })

        return (
                <ul className="sidebar navbar-nav">{elements}</ul>
            );
      }
    }

但是上面的解决方案显然不起作用，因为导入必须在顶层进行，并且不会从变量中获取组件名称。是否有其他方法可以从一开始就完全不了解图标来导入图标？还是我必须在定义侧边栏元素的同一点导入所有图标？

Answer 1

我在正在构建的个人项目中遇到了同样的问题。我发现的第一个问题与如何通过查询动态呈现图标有关？

主应用程序容器：

import React from "react"
import Header from "../components/header"
import Navigation from "../components/navigation"
import Footer from "../components/footer"
import containerStyles from "./styles.module.less"
import { library } from "@fortawesome/fontawesome-svg-core"
import { fab } from "@fortawesome/free-brands-svg-icons"

library.add(fab)

const IndexPage = ({ data }) => (
  <div className={containerStyles.home}>
    <div className={containerStyles.menu}>
      <Header />
      <Navigation />
    </div>
    <Footer />
  </div>
)

export default IndexPage

此外，我的图标是自由品牌版本的一部分，因此将其导入到库中。

因此，我要做的第一件事是导入库并在子组件上创建一对空变量，一个用于前缀，另一个用于图标本身： Table

在我的项目中，我使用了来自API端点的数据，为获取信息而构建的查询如下： HtmlElements framework

从理论上讲，所有设置都是为了映射数组并像往常一样渲染每个项目：

<FontAwesomeIcon
   icon={[
      (faprefix = document.node.prefix),
      (faicon = document.node.icon),
    ]}
   size="lg"
 />

但是子组件什么也没渲染。怎么会这样仅仅因为document.node.prefix和document.node.icon都返回字符串，所以当组件从数组映射数据时，它结束了尝试呈现这样的内容：

<svg data-prefix="'fab'" data-icon="'github'" >

请注意用单引号引起来的字符串

我对此的解决方案是使用带有正则表达式的replace（）方法删除包装引号：

<FontAwesomeIcon
   icon={[
      (faprefix = document.node.prefix.replace(/'/g, "")),
      (faicon = document.node.icon.replace(/'/g, "")),
   ]}
   size="lg"
/>

儿童页脚组件

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import containerStyles from "../pages/styles.module.less"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

let faicon = null
let faprefix = null
const Navigation = ({ data }) => (
  <StaticQuery
    query={graphql`
      query FooterTemplate {
        allStrapiLink {
          edges {
            node {
              id
              icon
              url
              prefix
            }
          }
        }
      }
    `}
    render={data => (
      <>
        <footer>
          <p>Freddy Polanía {new Date().getFullYear()}</p>
          <div className={containerStyles.links}>
            {data.allStrapiLink.edges.map(document => (
              <div key={document.node.id}>
                <a
                  href={document.node.url}
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <FontAwesomeIcon
                    icon={[
                      (faprefix = document.node.prefix.replace(/'/g, "")),
                      (faicon = document.node.icon.replace(/'/g, "")),
                    ]}
                    size="lg"
                  />
                </a>
              </div>
            ))}
          </div>
        </footer>
      </>
    )}
  />
)

export default Navigation

现在，我的图标是根据端点数据渲染的。我希望这可以帮助您解决问题。

在React.js中通过字符串数组导入FontAwesome图标

1 个答案: