Nuxt-fontawesome · Nuxt モジュール

Nuxt 3 プロジェクトでFont Awesome 6 アイコンを使用するためのモジュールです。

このモジュールは内部でvue-fontawesomeを依存関係として**使用していません**が、そのソースコードの一部を含んでおり、Nuxt ユニバーサルレンダリング(config で `ssr: true` として知られています) で機能を実現しています。

公式コンポーネントとの主な違いは、ブラウザでノードをレンダリングする代わりに、template に実際のタグを作成することです。そのため、サーバーでも動作します。

mask、transform、symbol など、できるだけ多くの機能を実装しようとしましたが、vue-fontawesome とまったく同じように動作するとは限りません。

問題が発生した場合は、Issues を使用して報告してください。

セットアップ

プロジェクトへの依存関係の追加

npx nuxi@latest module add @vesp/nuxt-fontawesome

いくつかのアイコンパックを追加

npm i -D @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

nuxt.config.ts の modules に @vesp/nuxt-fontawesome を追加します。
読み込むアイコンの構成

fontawesome キーを使用

  // nuxt.config.ts
  modules: [
    '@vesp/nuxt-fontawesome',
  ],
  fontawesome: {
    icons: {
      solid: ['cog', ...],
      ...
    }
  }
}

モジュールオプション

`component`

デフォルト: font-awesome

デフォルトのコンポーネント名は <font-awesome icon="" ... /> です。ここで変更できます。例えば、fa を指定すると、<fa icon="" ... /> になります。suffix も参照してください。

`useLayers`

デフォルト: true

レイヤコンポーネントをグローバルに登録するかどうかを示すブール値です。コンポーネント名は ${options.component}-layers になり、デフォルトでは <font-awesome-layers ... /> となります。

`useLayersText`

デフォルト: true

レイヤコンポーネントをグローバルに登録するかどうかを示すブール値です。コンポーネント名は ${options.component}-layers-text になり、デフォルトでは <font-awesome-layers-text ... /> となります。

`icons`

使用するアイコンです。FontAwesome は現在、3 つのファミリで最大 5 つのアイコンスタイルをサポートしています。

このオプションは、スタイル名をプロパティとし、そのスタイルから使用するすべてのアイコン名を含む配列を持つオブジェクトです。

  icons: {
    solid: ['coffee', 'child', ... ],
    regular: ['comment', ... ],
    brands: ['twitter', ... ],
  },
  proIcons: {
    solid: [],
    regular: [],
    light: [],
    thin: [],
    duotone: [],
  },
  sharpIcons: {
    solid: [], 
    regular: [],
    light: [],
    thin: [],
  }

`addCss`

デフォルト: true

モジュールがフォントオーサムのスタイルをグローバルCSS設定に自動的に追加するかどうか。Nuxt の css プロパティの先頭に @fortawesome/fontawesome-svg-core/styles.css を追加することで機能します。

`suffix`

デフォルト: true

アイコンコンポーネント名に -icon を追加するかどうかを示すブール値です。このオプションは、コンポーネント名オプションがレイヤーコンポーネントにも使用されており、それらに '-icon' を追加したくない場合に使用します。

  // config
  component: 'fa',
  suffix: true

  // usage
  <fa-icon />
  <fa-layers />
  <fa-layers-text />

  // config
  component: 'fa',
  suffix: false

  // usage
  <fa />
  <fa-layers />
  <fa-layers-text />

使用方法

playground フォルダで詳細を確認できます。

アイコンパッケージ npm i -D @fortawesome/free-solid-svg-icons をインストールし
nuxt.config.js にモジュールの設定を追加してください。

デフォルトのコンポーネント名は次のとおりです。

<font-awesome>
<font-awesome-layers>
<font-awesome-layers-text>

component オプションで名前を変更できます。

  // nuxt.config
  fontawesome: {
    icons: {
      solid: ['dollar-sign', 'cog', 'circle', 'check', 'calendar'],
      regular: ['user']
    }
  }

グローバルアイコンの使用

<template>
  <div>
    <font-awesome :icon="['far', 'user']" />
    <font-awesome icon="dollar-sign" style="font-size: 30px" />
    <font-awesome icon="cog" />

    <font-awesome-layers class="fa-4x">
      <font-awesome icon="circle" />
      <font-awesome icon="check" transform="shrink-6" :style="{color: 'white'}" />
    </font-awesome-layers>

    <font-awesome-layers full-width class="fa-4x">
      <font-awesome icon="calendar" />
      <font-awesome-layers-text transform="shrink-8 down-3" value="27" class="fa-inverse" />
    </font-awesome-layers>
  </div>
</template>

<script></script>

ローカルインポートされたアイコンの使用

<template>
  <div>
    <font-awesome-layers full-width size="4x">
      <font-awesome :icon="faCircle" />
      <font-awesome-layers-text transform="shrink-12" value="GALSD" class="fa-inverse" />
    </font-awesome-layers>

    <font-awesome :icon="faAddressBook" />
    <font-awesome :icon="faGithub" />
  </div>
</template>

<script setup>
import {faCircle, faAddressBook} from '@fortawesome/free-solid-svg-icons'
import {faGithub} from '@fortawesome/free-brands-svg-icons'
</script>

ライセンス

MIT ライセンス

このモジュールは、Nuxt コミュニティの公式Nuxt 2 モジュールにインスパイアされました。

サーバーサイドレンダリングで機能を実装するために、vue-fontawesomeリポジトリから一部のコードと関数を借用しました。