nuxt-fontawesome
@vesp/nuxt-fontawesome

在 Nuxt 项目中使用 Font Awesome 6 图标的模块

在您的 Nuxt 3 项目中使用 Font Awesome 6 图标的模块。

此模块不使用 vue-fontawesome 作为底层依赖,但包含其源代码中的一些代码,以通过 Nuxt 通用渲染(在配置中也称为 ssr: true)实现其功能。

与官方组件的主要区别在于在 template 中创建真实的标签,而不是在浏览器中渲染节点。这就是它能在服务器上工作的原因。

我尝试实现尽可能多的功能(例如 masktransformsymbol),但不确定是否所有功能都与 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 的工具包

  1. 在 FontAwesome 上检索您的工具包 IDhttps://fontawesome.com/kits/**KIT_ID**/package (10 个字母数字字符)
  2. Settings 选项卡中,如果尚未完成,请激活 Enable Installing Your Kit as a Package 选项
  3. 在您的本地项目中安装在 Package 选项卡中定义的自定义工具包包
  4. 通过在 kitIdentifier 键下添加您的工具包 ID 并在 proIcons.kit 键下添加项目所需的图标来更新 nuxt.config.ts
    // https://nuxtjs.org.cn/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']" />
    

许可证

麻省理工学院许可证

此模块的灵感来自 Nuxt Community 官方的 Nuxt 2 模块

部分代码和功能取自 vue-fontawesome 仓库,以实现其服务器渲染功能。