@vesp/nuxt-fontawesome

在 Nuxt 專案中使用 Font Awesome 6 圖示的模組

49.1K 下載•10 星•v2.0.0

bezumkin

在您的 Nuxt 3 專案中使用 Font Awesome 6 圖示的模組。

此模組不使用 vue-fontawesome 作為底層依賴，但包含其原始碼中的一些程式碼，以透過 Nuxt 通用渲染（在配置中也稱為 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', ...],
      ...
    }
  }
}

模組選項

`元件`

預設值： 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 屬性中來工作。

`字尾`

預設值： 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>

FontAwesome 工具包

您可以使用 Fontawesome Pro 的工具包。

在 FontAwesome 上檢索您的工具包 ID： https://fontawesome.com/kits/**KIT_ID**/package (10 個字母數字字元)
在 Settings 選項卡中，如果尚未完成，請啟用 Enable Installing Your Kit as a Package 選項
在您的本地專案中安裝在 Package 選項卡中定義的自定義工具包包

透過在 kitIdentifier 鍵下新增您的工具包 ID 並在 proIcons.kit 鍵下新增專案所需的圖示來更新 nuxt.config.ts

// https://nuxtjs.tw/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)
            ],
        },
    }
})

像這樣在您的頁面中使用您匯入的圖示

<font-awesome :icon="['fak', 'solid-user-circle-exclamation']" />

許可證

麻省理工學院許可證

此模組的靈感來自 Nuxt Community 官方的 Nuxt 2 模組。

部分程式碼和功能取自 vue-fontawesome 倉庫，以實現其伺服器渲染功能。