FortAwesome / react-fontawesome

Font Awesome React component
https://fontawesome.com
MIT License
3.68k stars 264 forks source link

Attempted import error: 'faAlbumCollectionCirclePlus' is not exported from '@fortawesome/pro-solid-svg-icons' #479

Closed Minho-Lee closed 2 years ago

Minho-Lee commented 2 years ago

Describe the bug pro-solid and pro-light icons with Fontawesome 6 doesn't seem to work with React + Typescript.

Reproducible test case I tried reproducing this with free-solid, but it seems to work, so I don't have a reproducible stackblitz url.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAlbumCollectionCirclePlus } from '@fortawesome/pro-solid-svg-icons';

const SomeComponent: React.FC = () => {
  return (
    <FontAwesomeIcon icon={faAlbumCollectionCirclePlus} />
  )
}

The above will throw the error describe in the title. If I actually follow the icon into index.d.ts, I can see the IconDefinition there properly. From my initial research, it seems to be an issue with tree-shaking, as this seems to work. import { faAlbumCollection } from '@fortawesome/pro-solid-svg-icons/faAlbumCollectionCirclePlus'; (As suggested from here: https://fontawesome.com/v6/docs/apis/javascript/tree-shaking).

This is what's in my package.json:

  "@fortawesome/fontawesome-common-types": "^0.3.0",
  "@fortawesome/fontawesome-pro": "^6.0.0",
  "@fortawesome/fontawesome-svg-core": "^1.3.0",
  "@fortawesome/free-brands-svg-icons": "^6.0.0",
  "@fortawesome/free-solid-svg-icons": "^6.0.0",
  "@fortawesome/pro-light-svg-icons": "^6.0.0",
  "@fortawesome/pro-regular-svg-icons": "^6.0.0",
  "@fortawesome/pro-solid-svg-icons": "^6.0.0",
  "@fortawesome/react-fontawesome": "^0.1.17",

Expected behavior I expect the icon to render without import errors.

Desktop (please complete the following information):

SHRoberts91 commented 2 years ago

Same issue, and even though I can import and use the v6 icons just fine through tree-shaking, my eslint is giving the error, faFilterList not found in '@fortawesome/pro-regular-svg-icons'eslint[import/named] for each v6 icon I'm using.

koeunhh commented 2 years ago

I'm experiencing the same issue

robmadole commented 2 years ago

All, try upgrading to 6.1.0. This includes @fortawesome/fontawesome-common-types and @fortawesome/fontawesome-svg-core as they are now version-aligned with the rest of the packages.

Minho-Lee commented 2 years ago

@robmadole Thanks! Upgrading the version to 6.1.1 seemed to fix my issue. 🙏