Skip to content

Use Font Awesome icons with popular Nuxt modules Nuxt Icon and NuxtUI

License

Notifications You must be signed in to change notification settings

aautcq/nuxt-iconify-fontawesome

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@aautcq/nuxt-iconify-fontawesome

NPM version NPM downloads License Nuxt

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

License

MIT License

About

Use Font Awesome icons with popular Nuxt modules Nuxt Icon and NuxtUI

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published