attach icon issue from Fawesome - reactjs

hope you can clarify this issue,
I am trying to use the Github Icon from fontawesome in react following the documentation:
link to documentation,
but I am having an issue and getting this error:
./src/components/FindMe/FindMe.jsx
Attempted import error: 'faGithub' is not exported from '#fortawesome/free-solid-svg-icons'.
My code is
//the imports from FA
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faGithub } from '#fortawesome/free-solid-svg-icons';
//the icon as per documentation
<FontAwesomeIcon icon={faGithub} />
I tried changing the capital letters but nothing, also using fabGithub but does not work, different ways to do it folowing the documentation but also nothing, I tried with other icons and it works.
Hope someone can clarify
edit
solved issue using this :
https://react-icons.github.io/react-icons/#/[enter link description here]2

FontAwesome have divided icons into separate npm packaged.
Github Icon is in different package: #fortawesome/free-brands-svg-icons
so first you would need to install that
npm install --save #fortawesome/free-brands-svg-icons
or
yarn add #fortawesome/free-brands-svg-icons
and then use it in your code:
import { faGithub } from '#fortawesome/free-solid-svg-icons';

Related

Attempted import error in react when importing Typogaphy and TexxtField from MUI

I work in a group project in gitlab, and when i try to run yarn dev for my react project I get the following error:
Attempted import error: '#mui/material/Typography' does not contain a default export (imported as 'Typography').
And the same error from TextField
This is how I import Typograpgy:
import Typography from '#mui/material/Typography';
Other imports works fine, but not TextField and Typography
Does anyone know the solution for this problem? I am the only one in the group that gets this error
I have tried to import by using
import {Typography} from '#mui/material'
instead, but that doesn't work either
I remember that I got a similar issue using material ui, one default export cannot be found and I fixed it by deleting node_modules folder and run :
npm install

Module not found: Can't resolve 'react-bootstrap/Media'

My MERN application is returning the error Module not found: Can't resolve 'react-bootstrap/Media'.
I am importing several react-bootstrap modules as shown:
import Image from "react-bootstrap/Image"
import Col from "react-bootstrap/Col"
import Media from "react-bootstrap/Media"
import Row from "react-bootstrap/Row"
import Button from "react-bootstrap/Button"
The remainder are working as expected. Any ideas why this one import wouldn't be found?
Thanks!
Check your node_modules and see if it's there
I was also having this issue. I had to downgrade my version of react-bootstrap to import the Media component.
npm install react-bootstrap#1.6.1
Looks like Media is changed to Card component in newer versions of react-bootstrap. https://react-bootstrap.github.io/components/cards/
You should use:
import Card from "react-bootstrap/Card"

Why my font-awesome icons are being displayed big at first and then updated to the right size?

Every time I refresh the page the font-awesome icons are being displayed big. Seems like the css in being loaded before applying the proper size because right after the refresh it shows big, and then goes to the right size.
I tried some solutions I found online but none of them worked.
Right now I'm back to square one where I have these:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebook } from '#fortawesome/free-brands-svg-icons'
import { faTwitter } from '#fortawesome/free-brands-svg-icons'
import { faLinkedin } from '#fortawesome/free-brands-svg-icons'
import { faEnvelope } from '#fortawesome/free-solid-svg-icons'
import { faMapMarkerAlt } from '#fortawesome/free-solid-svg-icons'
and then use them like this:
<FontAwesomeIcon icon={faFacebook} color="white" size="2x"/>
I didn't need to import any css but I did install following this link:
https://www.npmjs.com/package/#fortawesome/react-fontawesome
Basically I installed those:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
If someone could give me a direction on what to look for it would be great.
My project is hosted at Github (https://github.com/palomaschkrab/keto-ui)
And you can run it with "npm run dev" and go to localhost:3000/about_us if you want to see it happening.
This is a very common bug when using Font Awesome icons with static site generators that use server side rendering, like Gatsby.js and Next.js.
The cause is the fact that the icon is being rendered before the CSS is loaded.
You can fix this by loading the CSS manually in your root component, and then preventing Font Awesome from loading it again so you don't have duplicate classes.
Add the following to e.g. layout.js or index.js:
// The following import prevents a Font Awesome icon server-side rendering bug,
// where the icons flash from a very large icon down to a properly sized one:
import '#fortawesome/fontawesome-svg-core/styles.css';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '#fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */
More info can be found in this Github issue.
I've seen this before when browsing some pages, most notably www.getbootstrap.com
Only happened with Firefox and I found that Ctrl+F5 would fix the problem. As soon as I opened another URL on the same site, that effect returned. Never found out what was causing it, as I then decided to go to Chrome.

import error when using react-icons

I have tried installing react icons, in my application I ran the npm command:
sudo npm install react-icons --save
I didn't get any errors, apart from some optional dependencies, that where skipped
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current:
{"os":"linux","arch":"x64"})
Whenever I try to import some of the icons, I get an error
./src/components/SkiDaysCount.js
Module not found: Can't resolve 'react-icons/lib/md' in '
'/home/kristoffer/ReactApps/navbar/src/components'
here are my imports:
import {Terrain} from 'react-icons/lib/md'
import {SnowFlake} from 'react-icons/lib/ti'
import {Calender} from 'react-icons/lib/fa'
Why am I getting this error?
EDIT:
i have also tried using the old syntax for importing, with the same issue as such:
import Calender from 'react-icons/lib/fa/calender'
When you use the v3 way of importing the icons, you should not have lib be a part of the import path.
The icons also have the icon library name as prefix for the export.
import { FaCalendar } from 'react-icons/fa'
After looking through the icon directories react-icons/[fa,ti,md] and looking at the index.dt.ts file for the new names of the icons I came up with your answer.
import { MdTerrain } from "react-icons/md";
import { TiWeatherSnow } from "react-icons/ti";
import { FaCalendarAlt } from "react-icons/fa";
To use the icons in your component use the tags:
<FaCalendarAlt />
<TiWeatherSnow />
<MdTerrain />
For an explanation look at the Migration from version 2-> 3 on the react-icon page.
https://www.npmjs.com/package/react-icons
Not all the fa icons are free. I was getting this error when I was trying to import the paid icon of pencil as below.
import { FaPencil } from 'react-icons/fa'
If you see here for all the fa icons, you can see that the pencil needs the pro license.
As I was not having a pro license, I was getting the error. But we can always use the free versions of pencil, and we just need to import it as below.
import { FaPencilAlt } from 'react-icons/fa'
<button><FaPencilAlt /></button>
You should also check the implementation of your version from here.
If you have installed the 3.0.5 version of react-icons, Do try :
For Pencil(Edit):
import {FaPencilAlt} from 'react-icons/fa'
For Trash Can (Delete):
import {FaTrash} from 'react-icons/fa'
import {FaHiking, FaRightAlign,...} from 'react-icons/fa'
from the v3 of react icons library '/libname' is mandatory.
libname as 'fa'-> fontawesome, 'fi'->feathericons. for more info visit
https://react-icons.netlify.com/#/
maybe you have to update the "react-icons" package.
command:
npm update react-icons
This can also be caused by typo error.
say
import {Haiking) from 'react-icons/fa'
instead of
import {Hiking) from 'react-icons/fa'
perhaps you are in yarn mode and you need to use yarn add instead of npm install to install a package.
import { FaCalendar } from 'react-icons/fa';
import { MdTerrain } from "react-icons/md";
Mine was such an easy fix after all. All I needed was the full import name of the icon, even if just one icon always put curly {} and that was it fixed!
How many times do I delete node modules, install #latest and then realise ist the curlies! :-)
import {GoMail} from "react-icons/go";

Unable to import outlined svg icon component material-ui

I am using material icons in by react application.
I wanted to use circular check.
I could import and use the check_circle icon as follows
import CheckCircle from 'material-ui/svg-icons/action/check-circle';
There is another icon called circle_check_outline which I am unable to import by the normal import line
import CheckCircleOutline from 'material-ui/svg-icons/action/check-circle-outline';
It gives Can't resolve 'material-ui/svg-icons/action/check-circle-outline' error
I tried downloading the icon and render it as suggested in Marson Mao's answer to a similar question in stackoverflow
import SvgIcon from 'material-ui/SvgIcon';
import CheckCircleOutline from '../../assets/check-circle-outline.svg';
<SvgIcon>
{CheckCircleOutline}
</SvgIcon>
Then I got the following error
Uncaught TypeError: Cannot read property 'svgIcon' of undefined
at SvgIcon.render
I also tried Joey T 's answer in the same question. Installed #material/icons package using npm install #material-ui/icons#2.0.0-beta.1
and imported the icon as follows
import CheckCircleOutline from '#material/icons/CheckCircleOutline';
Still getting the error
Can't resolve '#material/icons/CheckCircleOutline'
I am using material-ui v0
The material-ui does not have check-circle-outline icon, hence it gives an error when importing. What you can do is get the latest icons from #material-ui/icons and then import them
Install the package by using the following command
npm install #material-ui/icons
Then import it,
import CheckCircleOutline from '#material-ui/icons/CheckCircleOutline';
Try this.
import CheckCircleoutline from '#material-ui/icons/CheckCircleOutline';
Use <CheckCircleoutline />

Resources