nuxt-fontawesome의 Could not find one or more icon... 오류 해결 방법

Nuxt.js에서 font-awesome 5 아이콘을 사용할 때는 nuxt-fontawesome이라는 플러그인을 사용하는 것 같습니다.

공식 페이지

그러나 보통 페이지대로 조작하고 GitHub, Facebook, Twitter 등의 아이콘을 사용하면Could not find one or more icon...이러한 오류 메시지가 표시되고 아이콘이 표시되지 않습니다.

해결책

free-brands-svg-icons 을 사용한다.

공식 페이지에서는 free-solid-svg-icons가 예로 사용되고 있으며, fas의 접두사에만 대응할 수 있다.

GitHub, Facebook, Twitter는 fab 접두사입니다.
오류 문장에서 추측 할 수 있다고 생각하지만 fas 접두사에서 아이콘을 찾고 있었기 때문에 찾을 수 없습니다.

fab 접두사를 지원하려면 free-brands-svg-icons을 사용하십시오.

//パッケージのインストール
$ npm i @fortawesome/free-brands-svg-icons

nuxt.config.js

 modules: [
    'nuxt-fontawesome'
 ],

 fontawesome: {
   imports: [
     {
       set: '@fortawesome/free-brands-svg-icons',
       icons: ['fab']
     }
   ]
 },

hoge.vue

<template>
  <div>
    <font-awesome-icon :icon="['fab', 'github-square']" />
    <font-awesome-icon :icon="['fab', 'facebook']" />
  </div>
</template>

↓이런 느낌으로 무사히 표시되었습니다. 좋았어요!


검색해도 돈피샤의 기사가 나오지 않았기 때문에 Qiita에 썼습니다.
Nuxt.js와 Vue.js를 최근 취미로 만지고 있으므로, 또 공유할 수 있으면 좋겠습니다.
그럼!