nuxt-fontawesome
@vesp/nuxt-fontawesome

NuxtプロジェクトでFont Awesome 6アイコンを使用するためのモジュール
49.1Kダウンロード10スターv2.0.0
bezumkinbezumkin

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

このモジュールは、依存関係としてvue-fontawesomeを内部で使用しませんが、その機能とNuxt Universal Render（設定では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
  • @vesp/nuxt-fontawesomeをnuxt.config.tsのmodulesに追加
  • 読み込まれたアイコンを設定

fontawesomeキーを使用

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

モジュールオプション

コンポーネント

  • デフォルト: 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 ... />となります。

アイコン

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

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

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

addCss

  • デフォルト: true

モジュールがfontawesomeスタイルをグローバルCSS設定に自動的に追加するかどうか。@fortawesome/fontawesome-svg-core/styles.cssをNuxtの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>

これらの名前はコンポーネントオプションで変更できます。

  // 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>

FontAwesomeキット

Fontawesome Proのキットを使用できます。

  1. FontAwesomeでキットIDを取得：https://fontawesome.com/kits/**KIT_ID**/package（10桁の英数字）
  2. Settingsタブで、Enable Installing Your Kit as a Packageオプションがまだ有効になっていない場合は有効にします
  3. Packageタブで定義されているカスタムキットパッケージをローカルプロジェクトにインストールします
  4. nuxt.config.tsを更新し、kitIdentifierキーの下にキットIDを、proIcons.kitキーの下にプロジェクトで必要なアイコンを追加します
    // https://nuxt.dokyumento.jp/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-11-01',
    devtools: { enabled: true },
    modules: [
        '@vesp/nuxt-fontawesome'
    ],
    fontawesome: {
        kitIdentifier: (KIT_ID),
        proIcons: {
            kit: [
                (ICON_NAME ex: solid-user-circle-exclamation)
            ],
        },
    }
})
  5. インポートしたアイコンをページでこのように使用します
    <font-awesome :icon="['fak', 'solid-user-circle-exclamation']" />

ライセンス

MITライセンス

このモジュールは、Nuxt Communityの公式Nuxt 2モジュールに触発されました。

いくつかのコードと機能は、サーバーレンダリングでその機能を実装するためにvue-fontawesomeリポジトリから取得されました。