I have a Next.js project where I am using fontawesome icons.
However, the icon does not show up on the web page. I even checked under inspect element and in the parent div and the icon element is not there.
Below is my _app.js file:
import '../styles/globals.css'
import { config } from '#fortawesome/fontawesome-svg-core'
import '#fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
And below is my index.js file in the pages directory:
import React, { Fragment } from "react"
import Head from 'next/head'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import '../node_modules/#fortawesome/fontawesome-svg-core/styles.css'
export default function Home() {
return (
<Fragment>
<FontAwesomeIcon icon="fa-brands fa-facebook-f" />
</Fragment>
)
}
Why isn't my icon rendering and how do I fix it?
Thanks in advance.
You still need to import icons into your project. That's why there is nothing showing. This is what your index.js should look like if using the free brands svg icons:
import React, { Fragment } from 'react'
import Head from 'next/head'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebookF } from '#fortawesome/free-brands-svg-icons'
export default function Home() {
return (
<Fragment>
<FontAwesomeIcon icon={faFacebookF} />
</Fragment>
)
}
Related
this is my index.html
<div id="root"></div>
<div id="portaltest"></div>
this my App.js
import React, { Component } from "react";
import PortalTest from "./PortalTest";
export class App extends Component {
render() {
return (
<div>
<PortalTest />
</div>
);
}
}
export default App;
this is what's in PortalTest.js
import React from "react";
import { ReactDOM } from "react";
function PortalTest() {
return ReactDOM.createPortal(
<div>This is the PORTAL DIV</div>,
document.getElementById("portaltest")
);
}
export default PortalTest;
This suppose to show the contents of PortalTest.js instead it only returns a blank page.
What did I do wrong?
Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.
See this sandbox.
I am trying to create Next.js app using Bootstrap 5 but when I use Bootstrap items next.js does not render and raises "TypeError: Cannot read properties of null (reading 'useRef')" but I am not using any hooks in my code.
navbar.js
import 'bootstrap/dist/css/bootstrap.min.css';
import ThemeProvider from 'react-bootstrap/ThemeProvider'
//import Button from 'react-bootstrap/Button'
import {Navbar, Nav, NavItem, MenuItem, Row, Container, Col, Card, NavLink} from 'react-bootstrap';
import Link from 'next/link'
export default function YavBar(){
return (
<Navbar bg="light" variant="light" fixed={"top"} >
<Nav>
<Link>Home</Link>
<Link >How to play</Link>
<Link >Give feedback</Link>
<Link>Exit</Link>
</Nav>
</Navbar>
);
}
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import SSRProvider from 'react-bootstrap/SSRProvider';
import 'bootstrap/dist/css/bootstrap.min.css';
const Navv = dynamic(() => import('/Users/memo/WebstormProjects/next2/meis/pages/navbar.js'));
export default function Home() {
return (
<div>
<Navv/>
</div>
)
}
I tried running without bootstrap and it worked.
how are you doing? I badly cannot connect GA with React, im very stucked and all the videos that i saw the ID connector its start with UA, please help me
import './App.css';
// import Header from "../Header/header"
import Header2 from "../Header2/header"
import Footer from "../Footer/footer"
import Switch from "../Switch/switch"
import {BrowserRouter as Router} from "react-router-dom";
import React, {useEffect} from "react"
import ReactGa from "react-ga";
/**** Icons ****/
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab, faFacebookSquare, faGoogle, faInstagramSquare, faWhatsappSquare} from '#fortawesome/free-brands-svg-icons'
import { fas, faBars, faIdCard, faGlobeAmericas, faCalendarAlt, faArrowUp} from '#fortawesome/free-solid-svg-icons'
library.add(fas, fab, faBars, faFacebookSquare, faInstagramSquare, faWhatsappSquare, faGoogle, faIdCard, faGlobeAmericas, faCalendarAlt, faArrowUp)
function App() {
useEffect(() => {
ReactGa.initialize('G-YZ9S63BMYY')
ReactGa.pageview(window.location.pathname)
}, [])
useEffect(() => {
console.log("hola", window.location.pathname)
})
return (
<Router>
<Header2 />
<React.StrictMode>
<Switch />
</React.StrictMode>
<Footer />
</Router>
);
}
export default App;
From now on thanks for all folks :)
You have to use React for GA4: https://www.npmjs.com/package/react-ga4
We are developing a using interface with React and Ant Design. We would like to override the default theme and colors. As an example we defines an array called themes. There is 4 differents themes as object. I defined a button to change theme. Reading the official docs I have included the following code in App.js to override the default theme but no success.
ConfigProvider.config(
{
theme:theme
}
)
Can anyone help me to override the default theme without less or anything else but just with ConfigProvider?
import "./App.css";
import "antd/dist/antd.css";
import { ConfigProvider } from "antd";
import { ThemeProvider } from "styled-components";
import ChangeTheme from "./components/ChangeTheme";
import { useContext } from "react";
import { AppContext } from "./_context";
const App = () => {
const { theme } = useContext(AppContext);
ConfigProvider.config({
theme: theme,
});
return (
<ThemeProvider theme={theme}>
<ConfigProvider>
<div className="App">
<ChangeTheme />
</div>
</ConfigProvider>
</ThemeProvider>
);
};
export default App;
First Step
you need to import antd.variable.min.css in one of your root files, like src/index.js which is recommended in the document,
import 'antd/dist/antd.variable.min.css';
Second Step
you also need to import antd's ConfigProvider in src/index.js:
import { ConfigProvider } from 'antd';
Third Step
then you need to modify the theme variables in config method of ConfigProvider like below:
ConfigProvider.config({ theme: { primaryColor: "#f00" } });
ps the vriables that you can modify in theme are:
primaryColor
errorColor
infoColor
processingColor
successColor
warningColor
Fourth Step
finally you wrap ConfigProvider around the <App/> component in src/index.js
<ConfigProvider>
{/* some other codes you might have */}
<App />
</ConfigProvider>
Trying to use an outlined button from material UI : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/buttons/OutlinedButtons.js
But get the error - "Unexpected use of 'self' no-restricted-globals"
And I don't have permissions to change it in the lodash.throttle/index.js file.
Is there any workaround for this that anyone knows of?? (It's literally just the sample code btw)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../node_modules/#material-ui/core/styles';
import Button from '../node_modules/#material-ui/core/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function OutlinedButtons(props) {
const {classes} = props;
return (
<div>
<Button variant="outlined" className={classes.button}>
Default
</Button>
</div>
);
}
OutlinedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OutlinedButtons);
After a request. App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import UserGroup from './components/user_group';
import ButtonTest from './components/Button';
import OutlinedButtons from './components/floatingButton'
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<header className="App-header">
{ OutlinedButtons }
</header>
</div>
</MuiThemeProvider>
);
}
}
export default App;
And index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();