【Nuxt3】FontAwesomeのインストールと好きなアイコンを使おう

運営者:そうすけ


愛媛出身の30代のブロガー兼ソフトウェアエンジニア
主にフロント・バックの開発を行っています。

趣味はガジェットと植物

Nuxt3での使い方はドキュメントのあり、色々乗っていたのですが、そのまま使うとエラーが結構出ました。

表示エラーやハイドレーションエラーが起きて結構詰まったので、そうならないカスタイマイズ方法を書きます。

目次

準備

インストールする

アプリディレクトリでまずコアのモジュールをインストール。下記を実行します。

npm i --save @fortawesome/vue-fontawesome@latest @fortawesome/fontawesome-svg-core

nuxt.configに記載する  注意点有

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  build: {
    transpile: [
      "@fortawesome/fontawesome-svg-core",
      "@fortawesome/free-solid-svg-icons",
      "@fortawesome/vue-fontawesome",
    ],
  },
  
  css: ['@fortawesome/fontawesome-svg-core/styles.css'],
 
  plugins: [
    '@/plugins/fontawesome.ts',
    '@/plugins/refreshTokenInit.client.ts',

  ]
})

ここはドキュメントにはありませんが、build:transpileを書いてください。

SSRの場合transpileをいれないと、ハイドレーションエラーが起きます。

私はここで3時間くらい調べてました。。

トランスパイルとはコードを変換することです。

Build transpileに記載することで、ビルド時にfontawssomeをSVGフォントアイコンに変換してくれる。 

SSRでは先にHTMLを組み立ててクライアント端末に送り、そのあとJSやCSSを当てていく。 

変換したデータでサーバーサイドでHTMLを組み立て。クライントに送る。 

このの流れがうまくいかないみたいです。

この記事参考になりました、、

解釈が違っているかもしれないのでドキュメントも観てみて下さい。

pluginsに記載 注意点有

import { config, library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
//以下は個別にアイコンを指定してimportする方法。こちらのほうが軽量で済む。
//{}には使いたいアイコン名を書く


export default defineNuxtPlugin((nuxtApp) => {

  config.autoAddCss = false
  //↓自分が使いたいライブラリ(solidやbrands)をインポートする
  library.add(fas)  

  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

まずこれで使えるようにします。

でもこのままではアイコンは表示されません。

必ず使いたいアイコンのライブラリも一緒にインストールして記述しないと使えません。

必要なアイコンのサンプルを選んでライブラリをインストール

アイコンが必要なライブラリをインストールします。

npm install @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons

調べる方法

例えば、検索してこのJavaアイコンを使うとします。

アイコンを検索してクリック、ポップアップの下の方にいくと使用するときにそのタブを張り付ければ使えるようにサイトが加工してくれています。

ここのタブ内の情報を見てどこのライブラリを使用しているのか判断します。

VUEならfabと書いていたら、fontawesome-brandの略なので、このライブラリをインストールしないといけないです。

ここがわからなかった。。

このアイコンがどこのライブラリに属するのか、ここで調べないといけません。

html部分を見ると、そのまま「fa-solid」のように書いてあるのでわかりやすかったです。

画像に alt 属性が指定されていません。ファイル名: image-20.png

Pro パッケージには、NPM をインストールできるようにするための追加の構成が必要です。

パッケージ名スタイルプレフィックス可用性
@fortawesome/free-solid-svg-icons固体ファソリッド無料
@fortawesome/free-regular-svg-icons通常ファレギュラー無料
@fortawesome/free-brands-svg-iconsブランドファブランド無料
@fortawesome/pro-solid-svg-icons固体ファソリッドプロのみ
@fortawesome/pro-regular-svg-icons通常ファレギュラープロのみ
@fortawesome/pro-light-svg-iconsライトフェイライトプロのみ
@fortawesome/pro-thin-svg-icons薄い薄いプロのみ
@fortawesome/pro-duotone-svg-iconsデュオトーンフェイデュオトーンプロのみ
@fortawesome/sharp-solid-svg-iconsシャープなソリッドファーシャープ ファーソリッドプロのみ
@fortawesome/sharp-regular-svg-iconsシャープレギュラーファ-シャープ ファ-レギュラープロのみ
@fortawesome/sharp-light-svg-icons鋭い光フェイシャープ フェイライトプロのみ
@fortawesome/sharp-thin-svg-iconsシャープで薄いファ・シャープ・ファ・シンプロのみ

最終的なpluginsファイル(これ見ればOK)

使いたいライブラリを書いてください。

import { config, library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
//以下は個別にアイコンを指定してimportする方法。こちらのほうが軽量で済む。
//{}には使いたいアイコン名を書く
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faArrowUpLong, faB, fas } from '@fortawesome/free-solid-svg-icons'

export default defineNuxtPlugin((nuxtApp) => {

  config.autoAddCss = false
  //↓自分が使いたいライブラリ(solidやbrands)をインポートする
  library.add(fas)
  library.add(fab)
  

  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

まとめ

  • 基本ドキュメントの手順通りだがそのままだとエラーがでる
  • nuxt.configにはbuild: transpile:を記述しないとハイドレーションエラーが起きる
  • 使いたいライブラリを調べて、それだけインストールする

意外とてこずってハードル高かったです。、

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次