Nuxt.jsでFont AwesomeのBrandsアイコンを使う

当ブログに最近フッターを追加した。

そこにTwitterとGitHubへのリンクを置こうと思い、FontAwesomeの各種アイコンを表示するようにした。

やったこと

nuxt-fontawesome - npm

大体はここに書いてることをやっただけ。

違いはSolidかBrandsかの違いで、今回使うTwitterやGithubのアイコンはBrandsに含まれている。

yarn add

$ yarn add nuxt-fontawesome
$ yarn add @fortawesome/free-brands-svg-icons

nuxt.config.js

以下を追加。

modules: [
  'nuxt-fontawesome'
],

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

components/Footer.vue

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