web-dev-qa-db-fra.com

Ajout de Font Awesome Pro à React App - Mise en route

J'essaie d'ajouter Fontawesome Pro à mon application de réaction.

J'ai essayé presque toutes les options de l'onglet Mise en route de Font Awesome - et tout ce que nous produisons, ce sont les marques libres. Donc, maintenant, j'ai un mélange de tentatives et je suis actuellement bloqué pour suivre les instructions énoncées par Clodal dans ce post

J'ai un package.json avec les dépendances suivantes:

"@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",

J'ai vu ce post et je constate que d’autres luttent pour comprendre comment se lancer dans une police géniale.

J'ai ajouté le jeton d'authentification de configuration globale à mon application.

J'ai lu les instructions de mise à niveau ici . 

Actuellement, je reçois une erreur qui dit:

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

Dans cette page, j'ai:

 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

Dans mon index.html j'ai:

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

J'ai essayé d'ajouter ces instructions d'importation à la page sur laquelle je suis en train d'utiliser les polices (je ne comprends pas les instructions de création de la bibliothèque).

Cela produit les erreurs (attendu, étant donné le prochain numéro):

Je ne sais pas où ajouter l'appel suivant d'ajout de bibliothèque:

library.add(fas, faTwitter)

Mon application est initialisée via main.js. Cette page a:

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()

Je pense que les instructions veulent que j'écrive cette bibliothèque, ajoutez un appel, mais je ne comprends pas comment le faire. 

J'ai vu ceci post - cet utilisateur a compris comment ajouter du code au fichier app.js. Je pense que je suis coincé sur cette étape. Mon app.js se trouve dans main.js - Je ne sais pas où placer l'appel à la bibliothèque et je ne sais pas si cet exemple signifie que l'utilisateur n'aura accès qu'aux 2 icônes nommées dans ce message (faSpinnerThird, faCircle ). 

J'utilise Material-UI - et je peux voir qu'il envisage l'utilisation d'icônes géniales de polices. Je n'arrive pas à comprendre comment le configurer.

PS: les directives pour contribuer sur la page d’assistance de GitHub, demandez à ce que les questions soient marquées avec react-fontawesome. Il n'y a pas d'étiquette pour cette référence - je n'ai pas assez de points pour en créer une - peut-être que quelqu'un qui le sait peut résoudre ce problème.

reactjsfont-awesomefont-awesome-5
5
Mel

Pour les autres personnes aux prises avec FA dans React - La réponse du PKK à cet article m’a aidée Comment intégrer FontAwesome 5 Pro à React?

Cependant, cela ne semble pas fonctionner avec 2 noms d'icônes Word. Mais au moins, cela fonctionne pour de nombreuses icônes. J'ai toujours pensé que FA était plug and play - cela a pris de nombreuses heures pour comprendre comment le faire fonctionner.

1
Mel

Selon la documentation sur les "icônes d'importation" , il n'y a pas de @fortawesome/pro-brands-svg-icons. Il n'y a que @fortawesome/free-brands-svg-icons.

0
Andy Ray