在您的 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 属性的前面来实现。
后缀
- 默认值：
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 option 更改这些名称。
// 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 Kit
您可以使用 Fontawesome Pro 的工具包。
- 在 FontAwesome 上检索您的工具包 ID：
https://fontawesome.com/kits/**KIT_ID**/package(10 个字母数字字符) - 在 Settings 选项卡中，如果尚未完成，请激活 Enable Installing Your Kit as a Package 选项
- 在您的本地项目中，安装在 Package 选项卡中定义的自定义工具包
- 更新
nuxt.config.ts，通过在kitIdentifier键下添加您的工具包 ID，并在proIcons.kit键下添加项目中所需的图标// 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) ], }, } }) - 像这样在您的页面中使用您导入的图标
<font-awesome :icon="['fak', 'solid-user-circle-exclamation']" />
许可证
此模块的灵感来自 Nuxt Community 官方 Nuxt 2 模块。
部分代码和功能取自 vue-fontawesome 仓库，以实现其服务器端渲染功能。