@aautcq/nuxt-iconify-fontawesome

@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:

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

License

MIT License