Not working with FontAwesome 6

[abhnvkmr]

There is a dependency issue with FontAwesome 6. I am using the latest release of gatsby-plugin-fontawesome-css.

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @fortawesome/[email protected]
npm ERR! node_modules/@fortawesome/fontawesome-svg-core
npm ERR!   @fortawesome/fontawesome-svg-core@"^6.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @fortawesome/fontawesome-svg-core@"^1.2.0" from [email protected]
npm ERR! node_modules/gatsby-plugin-fontawesome-css
npm ERR!   gatsby-plugin-fontawesome-css@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[atrudeau-vitall]

+1

[vladzagorski]

+1

[tnsicdr]

Updating the dependencies for this should fix it, doesn't look like much has changed with FontAwesome that would invalidate this workaround.

For the interim, if you need to use this, it should be easy enough to maintain your own updated copy in your local plugins path.

@jzabala Are you still maintaining this package?

[ed-wright]

@tnsicdr @vladzagorski @atrudeau-vitall @abhnvkmr I have had a PR open for a long time now attempting to fix this. I have now published a fork of this repo on NPM

https://github.com/ed-wright/gatsby-plugin-fontawesome-css
https://www.npmjs.com/package/gatsby-plugin-fontawesome-css-2

[whidy]

I think the easiest way should like this:

Edit gatsby-browser.js file, add lines:

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

Now all things should work well.

---

I've found the problem last month. After a bit research, I decide remove the plugin with FontAwesome6, let me tell the reason.

The plugin has no tree shaking and add all css to head when compiling project. It add to much useless styles.

In fact, author or us just want no flashing icon, no page jumping. So the easest way solve the problem only need the style below with page:

.svg-inline--fa {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

I put it with my global css file. The main problem solved, even though it will produce dulicated styles overwrite, I think that is acceptable and ok.

---

BTW, I just use the font svg mostly. As usally I will wrap icon with div or some other tag with class(such as w-4 text-blue-300 by tailwindcss) to set style. So I create a FA component, and set the autoAddCss to false. Part of code as below:

component src/components/fontAwesome.js

import React from 'react'
import { config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
config.autoAddCss = false

const FAIcon = props => {
  return <FontAwesomeIcon {...props} />
}

export default FAIcon

page to use, my footer.js

import { Link } from 'gatsby'
import React from 'react'
import FAIcon from './fontAwesome'
import { faKissWinkHeart } from '@fortawesome/free-solid-svg-icons'

const Footer = ({ siteMetadata }) => (
  <footer className="my-8 text-center text-gray-400">
    <p className="mb-2">
      <Link to="/" className="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
        {siteMetadata.title} © {new Date().getFullYear()}
      </Link>
    </p>
    <ul className="flex justify-center items-center mt-4">
      <li>
        <Link to="/about-me" className="mx-2 text-xl text-teal-400 hover:text-rose-200" target="_blank">
          <FAIcon icon={faKissWinkHeart} />
        </Link>
      </li>
    </ul>
  </footer>
)
export default Footer

and last css src/css/index.css:

.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

---

In fact, code above is not my full code, of couse this will lose a part of styles if you code like:

<FAIcon icon={faKissWinkHeart} size="lg" />

It won't work with size properties, for a perfect solution, you can read all props, you can read offical doc, and extend your component yourself.