Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う

参考にさせていただいたページ

• nuxt-fontawesome - npm
• Nuxt.jsでFontAwesomeを使う方法。必要なアイコンだけインポートする！ - Qiita

今日の開発環境

• Nuxt 2.14.12
• TypeScript 4.2.3

パッケージをインストールする

パッケージを4つインストールします。

yarn add nuxt-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

nuxt.config.jsの編集

Freeに含まれている以下の2つのアイコンを例に説明します。

• fa-search: https://fontawesome.com/icons/search
• fa-search-plus: https://fontawesome.com/icons/search-plus

例えばfaSearchとfaSearchPlusの2つを使用したい場合は、nuxt.config.jsのmodulesの項目を以下のような感じに編集します。

  modules: [
    〜略〜
    [
      'nuxt-fontawesome',
      {
        component: 'fa',
        imports: [
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: ['faSearch', 'faSearchPlus'],
          },
        ],
      },
    ],
  ],

コンポーネントファイルの編集

先ほどnuxt.config.jsで列挙したアイコンを、使用したいコンポーネント内で以下のようにimportします。

import { faSearch, faSearchPlus } from '@fortawesome/free-solid-svg-icons'

importしたアイコンは以下のようにcomputedでreturnします。

  computed: {
    faSearch() {
      return faSearch
    },
    faSearchPlus() {
      return faSearchPlus
    },
  },

以下のようにpropsに渡すと表示されます。

<fa :icon="faSearch" />
<fa :icon="faSearchPlus" />