@aautcq/nuxt-iconify-fontawesome
v1.0.0-rc.2
Published
Use Font Awesome icons with popular Nuxt modules Nuxt Icon and NuxtUI
Downloads
7
Maintainers
Readme
@aautcq/nuxt-iconify-fontawesome
Converts Font Awesome icons to Iconify JSON data, allowing the use of popular Nuxt modules such as Nuxt Icon or NuxtUI.
One icon set is generated per Font Awesome collection. Here are the corresponding Iconify prefixes for each Font Awesome set:
| Font Awesome set | Iconify prefix |
| ---------------- | -------------- |
| brands | fab
|
| regular | far
|
| solid | fas
|
Installation
Using NPM or whatever your preferred package manager is
npm i @aautcq/nuxt-iconify-fontawesome
Then you can get Iconify icon sets using the getIconSubSet
function exposed by the package
const myIconSet = getIconSubSet('<icon-set-name>', ['<icon-1>', '<icon-2>'])
Examples
Using Nuxt Icon
In your Nuxt config file, get an icon set and register it into Nuxt Icon
// nuxt.config.ts
import { getIconSubSet } from '@aautcq/nuxt-iconify-fontawesome'
const fasCollection = getIconSubSet('fas', ['check'])
export default defineNuxtConfig({
modules: ['@nuxt/icon'],
icon: {
customCollections: [
fasCollection.export(),
],
},
})
Then, in your .vue files
<template>
<Icon name="fas:check" />
</template>
Using NuxtUI
In your Nuxt config file, get an icon set and register it into NuxtUI
// nuxt.config.ts
import { getIconSubSet } from '@aautcq/nuxt-iconify-fontawesome'
const fasCollection = getIconSubSet('fas', ['check'])
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
icons: {
collections: {
[fasCollection.prefix]: fasCollection.export(),
},
},
},
})
Then, in your .vue files
<template>
<UIcon name="i-fas-check" />
</template>
Font Awesome pro and kits
You might have access to Font Awesome pro or a Font Awesome kit and need to generate Iconify icon sets for these. To do so, you can follow these steps:
- Fork this repository
- Uninstall the free Font Awesome icon packages and install the ones you need
- Update the
/src/scripts/convert-icons.ts
file to use the icon collections from the installed packages - Run the
build
script to generate the Iconify icon sets in the/dist
folder
To do
- Unit tests