Импорт значков FontAwesome по строковому массиву в React.js

Question

У меня есть массив элементов боковой панели в моем проекте 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>
            );
      }
    }

Но решение, приведенное выше, очевидно, не будет работать, поскольку импорт должен выполняться сверху-level и не будет брать имя компонента из переменной.Есть ли альтернативные способы импортировать иконки, не зная их с самого начала?Или я вынужден импортировать все значки в той же точке, где я определяю элементы своей боковой панели?

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

Кроме того, мои значки являются частью бесплатной версии бренда, поэтому импортировали их в библиотеку.

Итак, первое, что я сделалдолжен был импортировать библиотеку и создать пару нулевых переменных в моем дочернем компоненте, одну для префикса, а другую для самого значка:

В моем проекте яЯ потребляю данные из конечной точки API, запрос, который я построил для получения информации, выглядит следующим образом:

Теоретически все было установлено только для отображения массива и рендеринга каждого из них.item, как мы обычно делаем:

<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

Теперь мои значки отображаются из данных конечной точки.Надеюсь, это поможет решить вашу проблему.