npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aautcq/nuxt-iconify-fontawesome

v1.0.0-rc.2

Published

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

Downloads

7

Readme

@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