I Install all 3 required modules in react app.
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
I am trying to add font awesome icon in my program. But it is not showing up.Do I need to copy Font Awesome link and add in my app. That's what I used to do it in my html program.
(For example )
But in react how to do it? I tried the way which is in the document but it is not working. I only added the part of my program.Please help.
import React from 'react';
import { Form, Button} from 'react-bootstrap';
import './ContactUs.css';
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { faCheckSquare, faShare} from '#fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faShare)
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
// import { faShare } from '#fortawesome/free-solid-svg-icons'
class ContactUs extends React.Component{
render(){
return(
<div>
<Button className="btn send-button mt-4">
SUBMIT
<FontAwesomeIcon icon="share" />
</Button>
</div>
)
}
}
export default ContactUs;
I don't find any issue except one thing.
As you are using individual icon instead of, <FontAwesomeIcon icon="share" /> you must use write like this
<FontAwesomeIcon icon={faShare} />
Please check the below link for reference.
https://codesandbox.io/s/frosty-glade-9ful6?file=/src/App.js
This is an out-of-the-box Create React App install, and I have only done two things:
npm install react-bootstrap bootstrap
Changed App.js as follows:
import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button';
function App() {
function buy() {
alert('Clicked Buy');
}
function sell() {
alert('Clicked Sell');
}
return (
<div>
<Button variant='success' onClick={buy}>
Button1
</Button>
<Button variant='danger' onClick={sell}>
Button2
</Button>
</div>
);
}
export default App;
The buttons look the same as before I changed them from <button> to <Button variant=...:
You have to import the css for the buttons to work
import 'bootstrap/dist/css/bootstrap.min.css';
Add these lines to App.js, as per https://react-bootstrap.github.io/getting-started/introduction/#stylesheets
import 'bootstrap/dist/css/bootstrap.min.css';
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
The link statement is not required.
Results after adding css:
You need to convert it to a ES6 class definition:
import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
// This binding is necessary to make `this` work in the callback
this.buy = this.buy.bind(this);
this.sell= this.sell.bind(this);
}
function buy() {
alert('Clicked Buy');
}
function sell() {
alert('Clicked Sell');
}
return (
<div>
<Button variant='success' onClick={buy}>
Button1
</Button>
<Button variant='danger' onClick={sell}>
Button2
</Button>
</div>
);
}
App()
Instead of npm install react-bootstrap , i did npm install react-bootstrap bootstrap as it says in the documentation.
Your code is right, but you should also add
import 'bootstrap/dist/css/bootstrap.min.css';
in App.js
Follow these instructions
https://create-react-app.dev/docs/adding-bootstrap/
You need to add the dependencies in the package.json file (this is what yarn add react-bootstrap bootstrap will do).
Then yarn, to install the bootstrap-react node module.
Then you need to import of the bootstrap.css file. Add that import line to the top of the index.js file.
import 'bootstrap/dist/css/bootstrap.css';
You can then see that it's imported when you inspect the html in devtools.
I have created a app with create-react-app. But, I cant see why its keeps saying ./src/App.js
Module not found: Can't resolve './components/home/home' in ...
My project structure is:
Code for the app.js
import React from 'react';
import Home from './components/home/home';
function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;
home.js
import React, { Component } from 'react';
class Home extends Component {
state = {
text: "Lorem",
}
render() {
return (
<div>
<div className="container">{this.state.text}
</div>
</div>
)
}
}
export default Home;
I have imported components in previous projects the same way? and it's worked fine.
So I used npx create-react-app to create this app. Looks like its something to do with that. Because when I used npm -g create-react-app and then create-react-app my-app its working fine.
When I import reactive search from the following module:
import {ReactiveBase} from "#appbaseio/reactivesearch";
It keeps showing me the following error:
./node_modules/#appbaseio/reactivecore/lib/actions/query.js
Module not found: Can't resolve '../../../../node_modules/#appbaseio/reactivecore/src/actions/maps' in '/Users/mattewlee/Desktop/CS/Swallaby/walkon-map-website/node_modules/#appbaseio/reactivecore/lib/actions'
Well, for sure, I have installed for sure with "npm install #appbaseio/reactivesearch "
But this doesn't seem to work. Thank you for your answer in advance.
This is the following code of
my App.js:
import React, { Component } from 'react';
import './App.css';
import {ReactiveBase} from "#appbaseio/reactivesearch";
class App extends Component {
render() {
return (
<section className="container">
<ReactiveBase
app="my_housing"
credentials="myapikey"
type="listing"
>
Hello from ReactiveSearch!
</ReactiveBase>
</section>
);
}
}
export default App;
I have a project on React and I need to integrate FontAwesome to it. I found official library and installed it as instructed in readme
$ npm i --save #fortawesome/fontawesome
$ npm i --save #fortawesome/react-fontawesome
When I try to use it in my code like this:
<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>
I am getting this error on the console:
Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}
I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1; node v8.9.1; react v16.2.
You need to add any icons you wish to use, to a "library" for easy reference.
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '#fortawesome/fontawesome'
import FontAwesomeIcon from '#fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '#fortawesome/fontawesome-free-solid'
const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};
fontawesome.library.add(faCheckSquare, faCoffee);
const App = () => (
<div style={styles}>
<FontAwesomeIcon icon="check-square" /><br /><br />
<FontAwesomeIcon icon="coffee" />
</div>
);
render(<App />, document.getElementById('root'));
Check out working code here:
https://codesandbox.io/s/8y251kv448
Also, read this:
https://www.npmjs.com/package/#fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.
I had
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faUser } from "#fortawesome/free-solid-svg-icons";
library.add(faUser);
and
render() {
return (
<FontAwesomeIcon icon="faUser" />
);
}
when, in fact, the actual icon name is just "user", not "faUser":
render() {
return (
<FontAwesomeIcon icon="user" />
);
}
You can use FontAwesome icons without library like this:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
<FontAwesomeIcon icon={faCoffee} />
I've installed all the necessary packages as react-fontawesome says:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
And if you find yourself not seeing your icon when trying to display faTrashAlt (or similarly named icon), not only do you have to remove the 'fa' when actually using your icon but also you have to convert the icon name from cameCase to "lisp-case".
So, after loading the alternative trash can icon this way:
fontawesome.library.add(faTrashAlt);
It's then used that way:
<FontAwesomeIcon icon="trash-alt" />
Just so you don't waste 20 precious minutes of your time.
Just because there is more than one way to get a fontawesome icon into a website, I'll give an example with react and fontawesome and explicit import. Explicit import is frugal. Only the exact icon from the fontawesome icon set is imported and the FontAwesomeIcon component icon attribute is set to the imported object instead of the name.
Example:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
import { faHistory } from '#fortawesome/pro-regular-svg-icons';
function exampleReactComponent() {
return (
<div>
<p><FontAwesomeIcon icon={faCoffee}/></p>
<p><FontAwesomeIcon icon={faHistory}/></p>
</div>
);
}
I don't disagree with setting the icon attribute of the FontAwesomeIcon by name it's just that I encountered console errors about finding icons by name and the resolution I discovered is to reference the object. Note the icon={} notation because it is different than using a quoted string of the icon name.
Explicit Import...
react-fontawesome npm package github link
Installing with npm...
installing fontawesome with npm link
To pass the icon path using an array like this
icon={['fa', 'coffee']}
You'll need to import all references of the library in a file and import this file in the index of your React app.
Example, create the file named fonts.js
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/pro-solid-svg-icons';
import { far } from '#fortawesome/pro-regular-svg-icons';
import { fal } from '#fortawesome/pro-light-svg-icons';
import { fad } from '#fortawesome/pro-duotone-svg-icons';
import { fab } from '#fortawesome/free-brands-svg-icons';
library.add(fab);
library.add(fas);
library.add(far);
library.add(fal);
library.add(fad);
Now in the index.js of your app import the file that was created,
import '../configs/fonts.js'
This path is just an example, be sure that you are putting the right one.
For the free version of FontAwesome ;) #fortawesome
Install FontAwesome
npm install --save #fortawesome/react-fontawesome
npm install --save #fortawesome/fontawesome-free
npm install --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-regular-svg-icons
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/free-brands-svg-icons
Use it
...
import {FontAwesomeIcon} from '#fortawesome/react-fontawesome'
import '#fortawesome/fontawesome-free'
import {library} from '#fortawesome/fontawesome-svg-core'
import {far} from '#fortawesome/free-regular-svg-icons'
import {fas} from '#fortawesome/free-solid-svg-icons'
import {fab} from '#fortawesome/free-brands-svg-icons'
library.add(far,fas,fab);
...
<span className='fa fa-coffee'/>
<FontAwesomeIcon icon='coffee' />
<FontAwesomeIcon icon={['fas', 'coffee']}/>
<FontAwesomeIcon icon={['fab','react']}/>