I'm learning React JS and I'm trying to import font-awesome with npm modules to display this icon:
import React, { Component } from "react"; class Like extends Component { render() { return <i class="far fa-heart"></i>; } } export default Like; How the "import" statement at the top of the file should look like for this icon? I tried to read official documentation but can't really understand the pattern...
If the required modules are installed
$ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fontawesome $ npm i --save @fortawesome/fontawesome-free-regular you can use them like
import React, { Component } from "react"; import { FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import { faHeart } from '@fortawesome/fontawesome-free-regular'; class Like extends Component { render() { return <FontAwesomeIcon icon={faHeart}/>; } } export default Like; For more details refer to the official github repo
In case you're a pro member, you can install other modules as well, the listed once are free for use.
To have both types available, you can do import alias
import React, { Component } from "react"; import { FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import { faHeart as regularHeart } from '@fortawesome/fontawesome-free-regular'; import { faHeart as solidHeart } from '@fortawesome/free-solid-svg-icons'; class Like extends Component { render() { return {this.props.solid ? <FontAwesomeIcon icon={solidHeart}/> : <FontAwesomeIcon icon={regularHeart}/>}; } } export default Like; 
@fortawesome/fontawesome-free-regular@fortawesome/fontawesome-free-regular instead