3
votes

Comment utiliser Font Awesome dans React?

Je veux utiliser fontawesome dans mon projet react, j'ai lu document et j'ajoute fontawesome avec du fil :

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

class Todo extends Component {
    render() {
        return (
            <div>
                font: <FontAwesomeIcon icon="coffee" />

            </div>
        );
    }
}

export default Todo;

et créez un composant comme ci-dessous:

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

Mais ne pas afficher l'icône, comment résoudre ce problème?

javascript reactjs font-awesome

1 commentaires

Vous pouvez également jeter un œil à cette bibliothèque. react-icons.netlify.com/#

4 Réponses :

1
votes

Il se peut que vous épeliez "fortawesome" et non "fontawesome"

3 commentaires

Curieusement, c'est ainsi que cela est spécifié dans la documentation. fontawesome.com/how-to-use/on- le-web / utiliser-avec / réagir

@isherwood Bizarre, je n'ai pas vérifié la documentation, j'ai juste jeté un coup d'œil sur son code. Je me demande pourquoi ils ont fait ça

IIRC fortawesome était leur domaine. Peut-être avant qu'ils n'obtiennent le gros $ du kickstarter

1
votes

Vous semblez manquer des importations.

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIgloo } from '@fortawesome/free-solid-svg-icons'

library.add(faIgloo)

https : //fontawesome.com/how-to-use/on-the-web/using-with/react

0 commentaires

3
votes

Si vous souhaitez référencer l'icône par son nom, vous devez déclarer une bibliothèque :

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

Ensuite, utilisez-la comme ceci:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Favorite beverage: <FontAwesomeIcon icon="coffee" />
  </div>
)

Sinon, vous pouvez utiliser des importations explicites:

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

Tous ces détails sont expliqué ici . Les exemples ci-dessus proviennent de là.

1 commentaires

Comment l'utiliseriez-vous pour transmettre un nombre - comme dans une icône de panier et superposer le nombre d'articles dans le panier en haut de l'icône?

-1
votes

Tout d'abord, vous devez utiliser npm pour installer le package react

npm i -g fil

yarn add react-native-fontawesome

Après cela, vous devez importer les données à utiliser dans votre projet

import FontAwesome, { Icons } from 'react-native-fontawesome';
 
...
render() {
  return (
    <View>
      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>
        <FontAwesome>{Icons.chevronLeft}</FontAwesome>
        Text
      </Text>
    </View>
  );
},

si vous voulez un didacticiel plus complet, vous pouvez accéder au didacticiel cliquez ici

0 commentaires