계발하는 개발자

[React 에러] 폰트어썸 regular 아이콘 사용시 에러 해결 | 'IconDefinition' 형식은 'IconProp' 형식에 할당할 수 없습니다. 본문

❗️Error

[React 에러] 폰트어썸 regular 아이콘 사용시 에러 해결 | 'IconDefinition' 형식은 'IconProp' 형식에 할당할 수 없습니다.

dev_genie 2023. 12. 1. 14:34

참고

https://github.com/FortAwesome/react-fontawesome/issues/366

 

에러

폰트어썸 regular 아이콘을 사용하려고 했을 때 아래같은 에러가 발생했다.

 

원인

스택오버플로우를 쭉 살펴보니까 패키지 버전 호환으로 인한 에러라고들 했다.

이러한 버전 호환성 에러는 fontawesome-svg-core 패키지가 Font Awesome의 다른 패키지와 버전 호환성이 없을 경우 발생할 수 있는데 난 애초에 svg-core 패키지를 설치하지 않아서 그런듯..

 

해결

fortawesome/fontawesome-svg-core 패키지를 추가로 설치해줬고, 에러가 사라졌다.

// before
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.0",
"@fortawesome/react-fontawesome": "^0.2.0",

// after
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.0",
"@fortawesome/react-fontawesome": "^0.2.0",

 

리액트에서 폰트어썸을 사용하려면 아래 3가지 유형의 패키지들을 설치해줘야 한다는 걸 알게 됐다.

 

  • @fortawesome/fontawesome-svg-core: 아이콘 사용시 필요한 핵심 도구와 기능을 제공하는 패키지
  • @fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons, 등: 각각의 아이콘 패키지
  • @fortawesome/react-fontawesome: React에서 아이콘을 사용할 수 있게 해주는 패키지
LIST

'❗️Error' 카테고리의 다른 글

[React 에러] fontawesome 버전 충돌로 설치 안되는 에러 해결  (0) 2023.11.30
[React 에러] Cannot find module 'react-dom/client 에러 해결  (0) 2023.11.30
[Vue3 에러] Component name should always be multi-word 에러 해결  (1) 2023.11.29
[Svelte + TS 에러] Cannot find module './App.svelte' or its corresponding type declarations 에러 해결  (1) 2023.11.22
[Svelte + Tinro 라우터 에러] Argument of type 'typeof Route' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent' 에러 해결  (0) 2023.11.22
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!