Nuxt.jsでFontAwesomeを使う方法です。

また全てのアイコンを読み込むと重くなってしまうので、必要なアイコンだけ読み込んで表示させます。

Contents

設定方法

Font Awesomeのインストール

% yarn add --dev nuxt-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

モジュール名が@fontawesome/〜ではなく@fortawesome/〜になっているので、スペルに注意してください。

アイコンのインストール

必要に応じてアイコンのインストールします。

Solidアイコン

% yarn add --dev @fortawesome/free-solid-svg-icons

Solidアイコン一覧

Brandsアイコン

% yarn add --dev @fortawesome/free-brands-svg-icons

Brandsアイコン一覧

Font Awesomeの読み込み

// nuxt.config.js

modules: [
  'nuxt-fontawesome',
],

/*
 ** FontAwesome
 */
 fontawesome: {
  component: 'fa'
},

ここまで設定したら、後は必要なアイコンだけを読み込んで表示させます。

アイコンの表示方法

twitterアイコンの表示例です。

<template>
	<div>
		<fa :icon="faTwitter" />
	</div>
</template>

<script>
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
export default {
  computed: {
    faTwitter () {
      return faTwitter
    }
  }
}
</script>

アイコンの読み込み

import { faTwitter } from '@fortawesome/free-brands-svg-icons'

twitterアイコンが含まれているモジュールを読み込みます。

computedで設定

export default {
  computed: {
    faTwitter () {
      return faTwitter
    }
  }
}

戻り値の名前は、twitterアイコンのクラス名をキャメルケースに変えて記述します。

表示タグ

<fa :icon="faTwitter" />

参考