Trying to use FontAwesome icons on React but I am having some issues on importing the files correctly.
First I installed some dependencies and I am now able to import the component as follow
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faTrash } from "#fortawesome/free-solid-svg-icons";
and use it (succesfully) as
<FontAwesomeIcon icon={faTrash} />
However, the icon I would like to use is this one ( icon ) but I can't seem to be able to actually import it. If I try import { faThin } from "#fortawesome/free-solid-svg-icons"; it doesn't work and if I try import { faThin } from "#fortawesome/free-thin-svg-icons"; it doesn't neither.
Any ideas?
That font is part of the light package (fa-light fa-trash), so you will need:
#fortawesome/pro-light-svg-icons
and a subscription to pro.
Related
I have tried react-bootstrap components but it is not working. I have installed it perfectly but I do not know where is the problem.
App.js
import './bootstrap.min.css';
import Button from 'react-bootstrap/Button';
function App() {
return (
<Button>
Hello
</Button>
);
}
export default App;
Error On the Browser
I tried many solutions but none is working.
It's working. Maybe you are importing the file import './bootstrap.min.css'; wrong. Can you confirm?
I tried with this code:
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Button from 'react-bootstrap/Button';
function App() {
return <Button>Hello</Button>;
}
export default App;
Output:
make sure that you are install bootstrap library in project folder not out side it
cd (your project name)
and install it
Happy coding
I've gotten the icons to import by using the import statements and then utilizing the imported components, however, many of the icons act like classes and if you want variations of the icon you need to add to the class. I cannot do this with pre-defined components and when I define icon = "" in quotes rather than importing a component it does not work.
When I go on the website, for example, it gives me this code for React:
<FontAwesomeIcon icon="fa-solid fa-bold" />
My code:
import { faSolid, faBold } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
...
//Works
<FontAwesomeIcon icon={faBold} />
//Doesn't work
<FontAwesomeIcon icon="fa-solid fa-bold" />
<FontAwesomeIcon icon={{faBold, faSolid}} />
I should also mention that I followed a small tutorial on from a blog and added this code to my pages/_app.js file:
import "#fortawesome/fontawesome-svg-core/styles.css";
import { config } from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
It depends on how you import the packages. It's recommended for newer users to do what was working:
import { faSolid, faBold } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
...
//Works
<FontAwesomeIcon icon={faBold} />
//faSolid doesnt exist.
If you REALLY want to do it the other way, and just so you know there are a lot of drawback to it, you would need to import the package globally to your website. Again, I wouldn't recommend it, if you are just learning the package. It's extremelly easy to do individual imports, if you know the name of the icon you want to import then you type
import {faThumbsUp} from '#fortawesome/free-regular-svg-icons'
the trick is when you go to fontawesome you pick your icon then in the upper left hand corner you can pick from which library theres solid, thin, etc. and that is the name of the package.
// regular
#fortawesome/free-regular-svg-icons
// solid
#fortawesome/free-solid-svg-icons
They are all saved the same
faThumbsUp
faAlien
faThumbtack
// etc...
This question already has answers here:
import icons dynamically react fontawesome
(5 answers)
Closed 11 months ago.
I'm trying to use font awesome based on variable.
{var icon = 'FaFolder'}
<FontAwesomeIcon icon={(icon)} />
This is the error: Could not find icon {prefix: "fas", iconName: "faFolder"}
Of course I'm importing everything, and when I hardcoded the string instead of the var it works perfect.
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { FaFolder } from '#fortawesome/free-solid-svg-icons'
I know that if i refer the var to the FaFolder I'm importing like this
var icon = FaFolder
it will work but I have more than 10 icons I'm using and staring refer each one it is not efficient.
Any one knows how can I do it?
To make it work you have two options:
Option 1: Import font-awesome icons from CDN and use them not in the react component (this will allow you to store the icon name in the db and than you can add dynamically a className to <i> tags
Option 2: call the full icon name in an array: <FontAwesomeIcon icon={["fab", "github"]} />
Option 3: You have to pre-import in you index.js ALL the icons you need in your whole project in your index.js or App.js and then you can use them by retrieving their names from the db.
//App.js
//....
//React imports
import { library } from '#fortawesome/fontawesome-svg-core' //allows later to just use icon name to render-them
import { fab } from '#fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faCoffee)
//Other_file.js
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export const Beverage = () => (
<div>
<FontAwesomeIcon icon="check-square" /> //Put here your icon string
Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
</div>
)
Try like this
{var icon = ['fa','folder']}
<FontAwesomeIcon icon={icon} />
or
<FontAwesomeIcon icon={['fa','folder']} />
Yeah, your problem is that FaFolder being imported isn't a string. It's an object. You could consider adding FaFolder to state or importing it in the file you'll use it and using it instead. Something like this:
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { FaFolder } from '#fortawesome/free-solid-svg-icons'
export default function Component(props) {
let icon = FaFolder;
return <FontAwesomeIcon icon={(icon)} />
}
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import '#fortawesome/fontawesome-free-solid';
import '#fortawesome/free-brands-svg-icons';
In rendering code:
<FontAwesomeIcon icon={'facebook'} />
<FontAwesomeIcon icon={['fab','facebook']} />
<FontAwesomeIcon icon={['fab','facebook-f']} />
Nothing works.
I have the following errors:
backend.js:6 Could not find icon {prefix: "fab", iconName: "facebook"}
in FontAwesomeIcon (created by MyView)
in DashboardView (created by Router.Consumer)
in Router.Consumer (created by Route)
in Route
What am I missing?
I saw someone's advice to import specific objects like -
import { faFacebookF } from '#fortawesome/free-brands-svg-icons'
from here Font Awesome 5 use social/brand icons in React (and it's not a duplicate).
But I don't want to import specific objects, because my users should be able to use any icons, and it's specified in the model.
It's also unclear how these icons all work.
I had to change the import to:
import { library } from '#fortawesome/fontawesome-svg-core';
import { fab } from '#fortawesome/free-brands-svg-icons';
and add the following code:
library.add(fab);
After these changes everything started working.
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCopy, faQuestionCircle, faQrcode, faGithub } from '#fortawesome/free-solid-svg-icons';
import AddressList from './components/AddressList';
library.add(faCopy, faQuestionCircle, faQrcode, faGithub);
I have this code to import fontawesome icons in App.js in react. I am using the free version.
I get this error:
Failed to compile.
./src/App.js Attempted import error: 'faGithub' is not exported from
'#fortawesome/free-solid-svg-icons'.
Now all I can try to understand is that the free version does not have a github icon perhaps? However on their website.
That is filtering for free and github. I see it there now why am I such a noob?
"#fortawesome/fontawesome-svg-core": "^1.2.6",
"#fortawesome/free-solid-svg-icons": "^5.4.1",
"#fortawesome/react-fontawesome": "^0.1.3",
^ my package.json
Another quick question, where does font awesome even live in the file tree? I can't find it anywhere.
Hey so I just ran into the same issue and it drove me nuts for the past hour or so haha. Basically, they've split all the font awesome icons into their own "packages" or something. I think there are four catagories as seen on their website in the side bar when you click on the 'icons' tab. They are Solid, Regular, Light, and Brands.
For the GitHub icon, it is in the brands package so all you need to do in order to fix it is install the brand package with yarn or npm and import it.
$ yarn add #fortawesome/free-brands-svg-icons
Then in the .js component you want to add your icons
import React, { Component } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
import { faGithub } from '#fortawesome/free-brands-svg-icons'
class Main extends Component {
render(){
return(
<div className="main">
<h2> Hello Main! </h2>
<FontAwesomeIcon icon={faCoffee} />
<FontAwesomeIcon icon={faGithub} />
</div>
);
}
};
here I included both the coffee icon and the github icon to show two different icons.
This leads me to believe that the following should work for any of the icons in Font Awesome...
yarn add #fortawesome/free-[ICON PACKAGE]-svg-icons
and then
import { [ICON NAME] } from '#fortawesome/free-[ICON PACKAGE]-svg-icons';
but I'm not entirely sure. Anyway, hope this helped!
Cheers!
UPDATE:
For anyone who might stumble upon this similar issue in the future, I would actually suggest using the react-icons npm package. It contains large a package of popular icon sources (including FontAwesome) and also features only importing what you need. You can check it out at https://react-icons.netlify.com/#/
run this command and import:
npm i --save #fortawesome/free-brands-svg-icons or yarn add --save #fortawesome/free-brands-svg-icons;
import { faGithub } from '#fortawesome/free-brands-svg-icons';
import { faCopy, faQuestionCircle, faQrcode } from '#fortawesome/free-solid-svg-icons';
[NB]: socials icons are named brand icons, so all social icons would be import from free-brands-svg-icons and others would import from free-solid-svg-icons