Just started to learn react, and using the mui library.
I installed the MUI library with
npm install #mui/material #emotion/react #emotion/styled
I also installed the roboto font, and the icons.
Then i made a simple app that should just display MUI button.
App.js
import Button from '#mui/material/Button';
function App() {
return (
<div >
<h2>Hello World!</h2>
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
The three buttons have been copied directly from the library. When I run the app with npm start the page remains empty. The compilation is successful, there are no errors whatsoever. When i remove the buttons, the <h2> Hello World </h2> suddenly renders. When the buttons are left in the code, even the <h2> title disappears.
Why are the components not rendering?
Found the solution.
In my several attempts to get this to work I created multiple apps. Whenever I created the app using npm create-react-app I would then install the MUI library as described above.
The issue was that I did not cd to the app directory before installing the library. After changing directories the Buttons properly rendered.
I have tried this simple code to test the Material UI, when I save the code and run the local host browser it show empty white screen, if I removed the "" it shows the text and the img
import React from 'react';
import AddIcon from '#mui/icons-material/Add';
function Header(props) {
return (
<main>
<div className="header">
<h1>I am a header</h1>
<AddIcon/>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_Logo_2017.svg"
alt="" />
</div>
</main>
);
}
export default Header;
I followed the steps on the Mui website to install the required packages but nothing changed
So after trying different solutions this is what worked for me:
Create the react project using npx create-react-app urprojname
cd to the created project folder
open the terminal and run the 2 following lines to be able to use Material UI v5
npm install #mui/material #emotion/react #emotion/styled
npm install #mui/icons-material
I am trying to embed React Components into Angular because I have written some react components only because it's using a React library. However, my main framework is still Angular12+.
I have this .tsx file src/app/my-react-component.tsx
import * as React from 'react';
export default function MyReact() {
return (
<div>
<h1>Hello My React Component!</h1>
</div>
);
}
and I want to import this from src/app/app.component.ts
import MyReact from './my-react-component';
Then, I see this error
Import error, can't find file:
./my-react-component
To try, I added "jsx": "react" to tsconfig.json, but did not work, a solution from https://codebyz.com/embedding-react-components-in-angular-the-easy-way/
This is stackblitz page, which you can see this error.
Anyone who has a victory on importing .tsx into Angular project?
I think you did everything right
specify jsx: react in tsconfig
create a wrapper with React rendering (with standalone directive it becomes much simpler btw)
It's just an error from Stackblitz because they have their own vision of typescript compilation.
Here is a link with the same code from Codesandbox
It is a simple program . i am trying to use a material UI search icon . i have installed both material UI core and material UI icons . Im still unable to use them . can someone explain me why.
import React from 'react';
import "../style components/Header.css";
import SearchIcon from '#mui/icons-material/Search';
function Header() {
return (
<div className="Header">
<div className="header_left">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/FaceB.png" alt="" />
<SearchIcon/>
<div className="header_input">
<input type="text" />
</div>
</div>
<div className="header_middle"></div>
<div className="header_right"></div>
</div>
)
}
export default Header;
"this is the error"
./src/components/Header.jsx
Module not found: Can't resolve '#mui/icons-material/Search' in 'C:\Users\noushd\Desktop\Clone\facebook-clone\src\components'
The Material UI Icons module is dependant on the Material UI Core to display the icons. So make sure you installed the core module.
These components use the MUI SvgIcon component to render the SVG path for each icon, and so have a peer-dependency on #materialui/core.
https://mui.com/components/icons/#svg-material-icons
And just to add onto what Hamidreza said, you can use spaces in filenames but it's frowned upon as they might be misinterpreted by software that poorly supports them.
I had to install #emotion/react and #emotion/styled to get it working but it used to work without them before .
Solution1:- look at the package.json file material UI version and use the respective material UI.
Solution2:- Install the latest version of Material UI
I'm attempting to using react-fontawesome and implementing it in what seems to me to be exactly the same as the readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md
import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
render() {
return (
<div>
<div>
<span>
<FontAwesome
className='super-crazy-colors'
name='rocket'
size='2x'
spin
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
SOME TEXT
</span>
</div>
...
</div>
)
}
}
But I'm not seeing an icon in the DOM. Although I do see in the Chrome Dev Tools:
<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>
which I feel like should be a <i> tag. I tried changing the <span>...</span> to an <i>...</i> in "edit as HTML" in the dev tools and the icon still didn't show.
I have add-module-exports in my plugins and stage-2 in my presets in my webpack.config.
Can anyone tell me if I'm missing something? Do I need some other package other than react-fontawesome to make this work? Do I need to import the standard font-awesome.css or load a font-awesome CDN? Any help would be greatly appreciated, thanks!
I had the same problem. Read their Readme.md, and you see that there is this note:
Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.
So the most simple way is to link to the fontawesome cdn in your html.
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
Run npm install font-awesome --save
In your index.js or App.js or YourComponent.js, import the minified CSS file.
import 'font-awesome/css/font-awesome.min.css';
As the other answers mention, you need to include the icons in your page somehow. Check out the react-fontawesome example here:
https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html
You can see that the developer has included the font-awesome CSS on line #5.
On a separate note, Font Awesome v5 has been released, and you should consider moving to it. Read relevant docs here:
https://www.npmjs.com/package/#fortawesome/react-fontawesome
To use v5:
Install dependencies:
$ npm i --save #fortawesome/fontawesome
$ npm i --save #fortawesome/react-fontawesome
$ npm i --save #fortawesome/fontawesome-free-solid
Your component can then use icons like so:
import ReactDOM from 'react-dom';
import FontAwesomeIcon from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/fontawesome-free-solid'
const element = (
<FontAwesomeIcon icon={faCoffee} />
)
ReactDOM.render(element, document.body);
You can also build a library of commonly used icons in your app, for easy reference. Check out working code here: https://codesandbox.io/s/8y251kv448
More details about the library function available here:
https://www.npmjs.com/package/#fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
The only example I got working that actually seems up-to-date and didn't throw "can't resolve 'react' errors:
https://scotch.io/tutorials/using-font-awesome-5-with-react
import React from "react";
import { render } from "react-dom";
// get our fontawesome imports
import { faHome } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// create our App
const App = () => (
<div>
<FontAwesomeIcon icon={faHome} />
</div>
);
// render to #root
render(<App />, document.getElementById("root"));
Font Awesome now has an official React component that’s available to use their icons in your React applications.
Step 1 :
you must install 3 important packages in your project using a package manager like npm:
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
npm install --save #fortawesome/react-fontawesome
Step 2 :
if you're planning on styling the icons you must download these two extra packages :
npm install --save #fortawesome/free-brands-svg-icons
npm install --save #fortawesome/free-regular-svg-icons
Step 3:
Once you’ve installed all the packages you need for your project, now you can use the icons.
Import this packages in your component like this:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
After that you can import an icon into your component like this (example
using an icon with the class as "fas fa-atom")
import { faAtom } from '#fortawesome/free-solid-svg-icons'
P.S : you can import multiple icons in one import with adding a coma between
each one.
Step 4 :
use the imported icons
const element = <FontAwesomeIcon icon={faAtom} />
SOURCE : https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
This seems to work perfectly for React
Installation:
$ yarn add #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome
Usage:
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
Font Awesome 5 React
As #Alee pointed out Fontaweome fonts aren't included in the package. You will have to import it yourself.
Install npm font-awesome package. If you use npm run npm install font-awesome --save or if you use yarn then run yarn add font-awesome
Now you just have to import font-awesome.less under less directory by writing import 'font-awesome/less/font-awesome.less'
Now you should see your icons working :)
import fontawesome styles from the package itself without loading any external css:
import "#fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "#fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
See article to get more info
copy and paste in your html ...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
NEXT JS - Import styles this way if you are using NEXT jS
import '../node_modules/#fortawesome/fontawesome-svg-core/styles.css'
I suspect that you have not yet imported the CSS that FontAwesome needs - download the minified CSS file from FontAwesome's Web site and import it into your app.scss file or wherever else you're importing other stylesheets.
The react-fontawesome library is helping you create elements with class names like 'up-arrow', but without the stylesheet, your project will not know that there are icons corresponding to those classes.
Better to install everything all at once and then only import the icon you want,
npm i --save #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome #fortawesome/free-brands-svg-icons #fortawesome/free-regular-svg-icons
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faSpinner } from '#fortawesome/free-solid-svg-icons';
make sure to import the icon from the exact pack, you can use ctrl + space to use the power of suggections to fiding icons and for changing pack when your importing icon.
Make sure that you have installed the Font Awesome package correctly
using a package manager like npm or yarn. You can install it by
running the following command in your project directory:
npm install --save #fortawesome/fontawesome-free
Check if you have imported the required font awesome files in your
project. Make sure to import the necessary stylesheets and the icons
library in your project files. You can do this by adding the
following code to your main index.js file:
import '#fortawesome/fontawesome-free/css/all.css';
import { library }from '#fortawesome/fontawesome-svg-core';
import { fab } from '#fortawesome/free-brands-svg-icons';
import { fas } from'#fortawesome/free-solid-svg-icons';
Ensure that the icon name and style properties are set correctly.
You can use the FontAwesomeIcon component from the
#fortawesome/react-fontawesome package to display icons in your
project. For example, you can display a faUser icon with a solid
style using the following code:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faUser } from '#fortawesome/free-solid-svg-icons';
<FontAwesomeIcon icon={faUser} style={{color: 'black'}} />
If the above steps do not work, try clearing your browser cache and
restarting your development server.
If the issue persists, you may want to check the Font Awesome
documentation and GitHub repository for additional help and support
.
Try adding
<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>
to your main index.html within your react project.