React App, Using Font Awesome brand icons in React VS Vue

1
votes

I am trying to use the brand icons from Font Awesome, I have already used it before in a vue application, it's a little different from using the regular svg icons as the brands library is separate from the regular solid svg icons. this is how i used in a vue app. 

// imports in the main.js file
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons';

library.add(faCoffee, faFacebookF);

Vue.component('fa-icon', FontAwesomeIcon)

// usage in a vue component - regular svg icons 
<fa-icon icon="coffee" />
// brand icon 
<fa-icon class="ic right" :icon="['fab', 'facebook-f']" />

Now i am trying to do a similar thing in a react app, But I am a little stuck on where and how to import and use it, In Vue, I defined the <fa-icon /> globally in my main.js, but things are a little different with React. here is my attempt in a react component.

// imports in my app.js file 
import React from 'react';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons';

library.add(faCoffee, faFacebookF)
//this works 
<FontAwesomeIcon icon="coffee" />
//this does not
<FontAwesomeIcon icon={"['fab', 'facebook-f']"} />
thanks in advance.
2
reactjsvue.jsfont-awesome

2 Answers

0
votes

Install All Free Font Awesome Icons-- Using cmd on your project location:

 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/free-brands-svg-icons
 npm i --save @fortawesome/free-regular-svg-icons

Import this for Font Awesome:

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

Add Font Awesome to your JSX:

<FontAwesomeIcon icon={faFacebookF}></FontAwesomeIcon>
<FontAwesomeIcon icon={faTwitter}/>
<FontAwesomeIcon icon={faGoogle}/>

And Lastly, import your brands-icon from your installed repository:

import {faFacebookF, faGoogle, faTwitter} from "@fortawesome/free-brands-svg-icons";