I was unable to get Font Awesome icon working when using string as value for icon parameter.
This working:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
<FontAwesomeIcon icon={faCoffee} />
However this does not:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
<FontAwesomeIcon icon="coffee" />
And according to this documentation it should.
But I am new to React so may be missing something.
Using javascript. Project created with react cli.
Package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-regular-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"font-awesome": "^4.7.0",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-metismenu": "^1.4.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"rsuite": "^4.8.8",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
By "not working" I mean that icon is not visible on the page and console have an error: "Could not find icon {prefix: "fas", iconName: "coffee"}"
You'll need to import library like this: import { library } from '#fortawesome/fontawesome-svg-core'
Then add the icon(s) you wish to use.
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
library.add(faCoffee /*, faCheckSquare, etc*/)
After this, you should be able to use the icon as "coffee". If you are not adding the icons to the library, they will not be included in the bundle, hence the error.
Related
I'm using the Header comp from Semantic-ui like this, and I'm having this error for some components, not only Header. All of the components are imported but some of them are not working.
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import { Header, HeaderContent, List, ListList } from 'semantic-ui-react';
function App() {
const [activities, setActivities]=useState([]);
useEffect(()=>{
axios.get('http://localhost:5000/api/Activites').then(response =>{
console.log(response);
setActivities(response.data);
})
},[])
return (
<div>
<HeaderContent as='h2' icon='users' content='Reactivites' ></HeaderContent>
<ListList>
{activities.map((activity: any)=>(
<List.Item key={activity.id}>
{activity.title}
</List.Item>
))}
</ListList>
</div>
);
}
export default App;
I am using typescript on my react project and semantic-ui for styling
My package.json looks like this, and if its needed to change version of some dependencies give me suggestions on the comments
{
"name": "client-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.31",
"#types/react": "^18.0.8",
"#types/react-dom": "^18.0.0",
"axios": "^0.27.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.2",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "semantic-ui-css-patch"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I know 100% that the error its from the semantic-ui and I would appreciate so much for some help and thank you in forward
I'm new to TypeScript and its my first time using semantic-ui
I try to make typescript react setting
and then just install antd
$ yarn add antd
and fix app.tsx like this
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Switch } from "antd";
function App() {
function onChange(checked: any) {
console.log(`switch to ${checked}`);
}
return (
<div className="App">
<Switch defaultChecked onChange={onChange} />
</div>
);
}
export default App;
but i can't see right switch
https://i.stack.imgur.com/rmGjJ.png
i want to look like this
https://i.stack.imgur.com/xKVWW.png
and this is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"antd": "^4.18.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
How to solve this rendering problem?
I'm creating my own React components for Google's Material Components for Web. I'm trying to get the styling to work. According to the docs, you need to add the following to your sass file:
#use "#material/button";
// #include button.core-styles;
Note: I think there is a bug in the docs - button.core-styles doesn't exist. I just commented it out.
When the button renders, it has all the classes on the element, but all the styles associated with those classes are missing. So it doesn't look like an MDC button.
I found this bug report, which lead me to try this:
#import "#material/button/mdc-button";
And voila! The button is styled!
Can someone explain to me what the difference is between the #use and #import options? And why I would use one over the other?
Full example:
Button.scss
#import "~#material/button/mdc-button";
Button.js
import './Button.scss';
import {useEffect, useRef} from 'react';
import {MDCRipple} from '#material/ripple';
function Button(props) {
const buttonElement = useRef(null);
useEffect(() => {
const ripple = new MDCRipple(buttonElement.current);
return () => {
ripple.destroy();
}
});
return (
<button className="mdc-button mdc-button--raised" ref={buttonElement}>
<span className="mdc-button__ripple"></span>
<span className="mdc-button__label">{props.children}</span>
</button>
);
}
export default Button;
package.json
{
"name": "button-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material/button": "^12.0.0",
"#material/ripple": "^12.0.0",
"#material/theme": "^12.0.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"install": "^0.13.0",
"npm": "^7.20.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"sass": "^1.37.5",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Ugh. I just found this bug report. But the material.io website still has old info on it....
When I use:
#use "~#material/button/styles";
The button is now styled.
I am doing a basic import of a component and it keeps on giving me this error:
./src/Nav.js
Module not found: You attempted to import ..\node_modules\#pmmmwh\react-refresh-webpack-plugin\lib\runtime\RefreshUtils.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
But my Nav component is inside the /src.
my import
import React from 'react'
const Nav = () => {
return(
<header class="header">
</header>
)
}
export default Nav
Here is my package.json:
{
"name": "react-timesheet-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.12.16",
"#babel/preset-env": "^7.12.16",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-loader": "^8.2.2",
"webpack": "^5.22.0"
}
}
I recently had a similar problem with missing packages, if that is the reason for the error, why do I keep on getting them?
I need help getting my progress bar from react-bootstrap to display. I have installed both bootstrap and react-bootstrap from yarn and I imported both files and the component into my react app. Somehow it still doesn't work for me. Any suggestions
Dashboard.js
import React,{useEffect,useState} from 'react';
import styled from 'styled-components'
import Bootstrap from 'bootstrap/dist/css/bootstrap.min.css';
import {Container,Row,Col, ProgressBar} from 'react-bootstrap'
import './table.css';
function Dashboard(props) {
return (
<div>
<ProgressBar now={60}/>
</div>
);
}
export default Dashboard;
Package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.4.1",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"styled-components": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
try Progress instead of ProgressBar:
<div>
<Progress value={60} />
</div>
working stackblitz here
It might have something to do with the way that you are importing the bootstrap CSS file.
The documentation mentions to import it like this:
import 'bootstrap/dist/css/bootstrap.min.css';
The following line can be included in your src/index.js or App.js file
Add this to your webpack.config file
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...