fontawesome-unocss

fontawesome-unocss

Want to use FontAwesome Kit but don't want to rely on their API?

Simply host your own SVGs, and use UnoCSS Preset Icons.

This package takes the hassle of setting UnoCSS up with your own icons.

First you need to upload your icon somewhere and make it accessible from a url.

// unocss.config.js
import { FontAwesomeCollections } from 'fontawesome-unocss'

export default defineConfig({
  presets: [
    // ... your other presets
    presetIcons({
      collections: {
        // Put the path to your icons
        // e.g https://fa.example.com/6.3.0/svgs/solid/pizza-slice.svg
        // Then your path is:
        ...FontAwesomeCollections('https://fa.example.com/6.3.0/svgs'),
      },
    }),
  ],
})

Frameworks

• Vue
• React (WIP, need help)
• Svelte (WIP, need help)

Fixed Width

To enable Fixed Width, first import the CSS.

// main.ts
import 'fontawesome-unocss/styles/fw.css'

This will enable Fixed Width globally. All icons are already shipped with .fa-fw class.

You can disable fixed width for individual icon, see Disable Fixed Width section on each framework.

Vue

// main.js
import { FaVue } from 'fontawesome-unocss'

createApp(App)
  .use(FaVue())
  .mount('#app')

// MyComponent.vue
<template>
  <div>
    <fa-icon icon="far pizza-slice" />
  </div>
</template>

By default the package use the format which I personally like.

<fa-icon icon="far pizza-slice" />

You can change the component name <fa-icon> to other name you like, e.g MyIcon

createApp(App)
  .use(FaVue({name: 'MyIcon'}))
  .mount('#app')

<MyIcon icon="far pizza-slice" />
<my-icon icon="far pizza-slice" />

If you come from vue-fontawesome, you might want to stay using their format. You can provide your own logic into option parser. The parser needs to convert whatever you put to icon props into object { iconFamily, iconName }.

iconFamily is one of the following string: fab far fas fat fal fad fasr fass.

Example 1:

<font-awesome-icon :icon="['far', 'pizza-slice']" />

// main.js
const FontAwesome = FaVue({
  name: 'font-awesome-icon',
  parser: (propIcon) => {
    const [iconFamily, iconName] = propIcon
    return {
      iconFamily,
      iconName,
    }
  }
})

createApp(App)
  .use(FontAwesome)
  .mount('#app')

Example 2:

<font-awesome-icon icon="fa-regular fa-pizza-slice" />

// main.js
const FontAwesome = FaVue({
  name: 'font-awesome-icon',
  parser: (propIcon) => {
    const [family, iconName] = propIcon

    let iconFamily = ''
    if (family === 'fa-regular') {
      iconFamily = 'far'
    } else if (iconFamily === 'fa-solid') {
      iconFamily = 'fas'
    } else {
      ... and so on
    }

    return {
      iconFamily,
      iconName,
    }
  }
})

createApp(App)
  .use(FontAwesome)
  .mount('#app')

Disable Fixed Width For Vue

<!-- you can use props no-fw -->
<fa-icon icon="far pizza-slice" no-fw />
<!-- or provide a boolean true/false, true to disable fixed-width -->
<fa-icon icon="far pizza-slice" :no-fw="true" />

React

Coming soon

Svelte

Coming soon