将 Font Awesome Pro 添加到 React 应用程序 - 入门

Question

我正在尝试将 Fontawesome pro 添加到我的 react 应用中。

我已经尝试了 Font Awesome 入门选项卡上的几乎所有选项 - 所产生的只是免费品牌。所以 - 现在我有一个混搭的尝试，目前坚持遵循 clodal 在这个 post

中设置的说明

我有一个包含以下依赖项的 package.json：

"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/pro-light-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/pro-regular-svg-icons": "^5.5.0",
"@fortawesome/pro-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",

我看到了这个 post 并注意到其他人正在努力弄清楚如何开始使用 font awesome。

我已将全局配置身份验证令牌添加到我的应用程序中。

我已阅读升级说明here。

目前 - 我收到一条错误消息：

 Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'

在那个页面中，我有：

 import React from 'react'
    import PropTypes from 'prop-types'
    import classes from './HowPage.scss'

    import GridContainer from "components/Grid/GridContainer.jsx";
    import GridItem from "components/Grid/GridItem.jsx";
    import Clearfix from "components/Clearfix/Clearfix.jsx";
     import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter } from '@fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

    export const HowPage = ({ how }) => (
      <div className={classes.container}>
        <h1 style={headstyle}>How it Works</h1>
          <GridContainer justify="center">
             <GridItem
                xs={12}
                sm={8}
                md={8}
                className={`${classes.mlAuto} ${classes.mrAuto} ${
                  classes.textCenter
                }`}
            >
            <span>
      <i className="fas fa-layer-plus"></i>
    </span>
            <i className="fal fa-stroopwafel"></i>  
            <FontAwesomeIcon icon="coffee" />
            <i className="fab fa-twitter" />

            </GridItem>
          </GridContainer>

        <pre>{JSON.stringify(how, null, 2)}</pre>
      </div>
    )

    HowPage.propTypes = {
      how: PropTypes.object // from enhancer (firestoreConnect + connect)
    }

    export default HowPage

在我的 index.html 中有：

  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

我已尝试将这些导入语句添加到我尝试使用字体的页面（我无法理解库构建说明）。

这会产生错误（预期，鉴于下一个问题）：

我不知道在哪里添加以下库添加调用：

library.add(fas, faTwitter)

我的应用通过 main.js 初始化。该页面有：

import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { fal } from '@fortawesome/pro-light-svg-icons'


// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()

// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
  firebase: { authError: null }
}
const store = createStore(initialState)

// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')

let render = () => {
  const App = require('./containers/App').default
  const routes = require('./routes/index').default(store)

  ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}

// Development Tools
// ------------------------------------
if (__DEV__) {
  if (module.hot) {
    const renderApp = render
    const renderError = error => {
      const RedBox = require('redbox-react').default

      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
    }

    render = () => {
      try {
        renderApp()
      } catch (e) {
        console.error(e) // eslint-disable-line no-console
        renderError(e)
      }
    }

    // Setup hot module replacement
    module.hot.accept(['./containers/App', './routes/index'], () =>
      setImmediate(() => {
        ReactDOM.unmountComponentAtNode(MOUNT_NODE)
        render()
      })
    )
  }
}

// Let's Go!
// ------------------------------------
if (!__TEST__) render()

我认为说明要我在其中编写该库添加调用-但我不明白该怎么做。

我看到了这个post - 这个用户已经知道如何将代码添加到 app.js 文件中。我想我被困在这一步了。我的 app.js 在 main.js - 我不知道在哪里放置库调用，我不知道这个示例是否意味着用户只能访问该帖子中命名的 2 个图标（faSpinnerThird、faCircle ）。

我正在使用 Material-UI - 并且可以看到它考虑使用字体真棒图标。我只是不知道如何设置它。

PS：GitHub 支持页面上的 contributing guidelines 要求使用 react-fontawesome 标记问题。该参考没有标签 - 我没有足够的积分来创建一个 - 也许有人可以解决这个问题。

Answer 1

对于其他在 React 中遇到 FA 问题的人 - PKK 在这篇文章中的回答帮助了我 How to integrate FontAwesome 5 Pro with React?

但是，它似乎不适用于 2 字图标名称。但是 - 至少它适用于许多图标。我一直认为 FA 即插即用 - 花了好几个小时才弄清楚如何让它发挥作用。

Answer 2

根据the "importing icons" documentation，没有@fortawesome/pro-brands-svg-icons。只有@fortawesome/free-brands-svg-icons。