Brtdku

I want use fontawesome in my react project, i read document and add fontawesome with yarn:

$ yarn add @fortawesome/fontawesome-svg-core

$ yarn add @fortawesome/free-solid-svg-icons

$ yarn add @fortawesome/react-fontawesome

and create a component like as below:

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;

But don't show icon, how fix this?

You seem to be missing some imports.

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

If you want to reference the icon by its name you have to declare a library:

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)

Then use it like this:

import React from 'react'

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



export const Beverage = () => (

  <div>

    <FontAwesomeIcon icon="check-square" />

    Favorite beverage: <FontAwesomeIcon icon="coffee" />

  </div>

)

Otherwise, you can use explicit imports:

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)

All this bits of details are explained here. The above examples are from there.

It could be that you are spelling 'fortawesome' and not 'fontawesome'

Firstly you should use npm to install the react package

npm i -g yarn

yarn add react-native-fontawesome

After this you must import the data to start using in your project

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>

  );

},

if you want a more complete tutorial you can access the tutorial clicking here