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

问题描述

我的 React.js 项目中有一组侧边栏元素，其中每个元素都表示为对象，其中包括定义为字符串的自己的 FontAwesome 图标，例如fa-phone. 现在 FontAwesome 与 React.js 的集成出现了问题；根据他们的手册，每个图标都必须单独导入并添加到库中。

    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>
            );
      }
    }

但是上面的解决方案显然不起作用，因为导入必须发生在顶层并且不会从变量中获取组件名称。有没有其他方法可以在不完全了解图标的情况下导入图标？或者我是否被迫在定义侧边栏元素的同一点导入所有图标？

标签： javascriptreactjsfont-awesome

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

主应用容器：

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

此外，我的图标是免费品牌版本的一部分，因此将它们导入库。

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

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

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

<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

现在我的图标正在从端点的数据中呈现。我希望这可以帮助解决您的问题。

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

问题描述

解决方案

推荐阅读