nuxt-community / fontawesome-module

Module to use Font Awesome icons in Nuxt.js

@nuxtjs/fontawesome

Module to use Font Awesome icons in your Nuxt.js project. Uses vue-fontawesome under the hood

📖 Release Notes

Setup

• Add dependency using npm to your project

$ yarn add @nuxtjs/fontawesome -D

// or to also add the free icon packs

$ yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D

• Add @nuxtjs/fontawesome to buildModules in your nuxt.config
• Configure loaded icons/whole sets

Use the 'fontawesome' key:

  // nuxt.config.js
  buildModules: [
    '@nuxtjs/fontawesome',
  ],

  fontawesome: {
    icons: {
      solid: ['faCog', ...],
      ...
    }
  }
}

or include the options in the modules listing

  // nuxt.config.js
  buildModules: [
    ['@nuxtjs/fontawesome', {
      component: 'fa',
      suffix: true,
      proIcons: { // if you have bought the Pro packages
        // list the icons you want to add, not listed icons will be tree-shaked
        solid: [
          'faHome',
          'faHeart'
        ],
        // include all icons. But dont do this.
        regular: true
      }
    }]
  ]

Module options

component

• Default: FontAwesomeIcon

Change component name. Eg set to fa to use <fa icon="" ... />. Also see suffix

It's strongly recommended to use PascalCase for component names

useLayers

• Default: true

Boolean to indicate if the layers component should be registered globally. Name of the component will be ${options.component}-layers, fe <fa-layers ... />

useLayersText

• Default: true

Boolean to indicate if the layers component should be registered globally. Name of the component will be the ${options.component}-layers-text, fe <fa-layers-text ... />

icons

Which icons you will use. FontAwesome currently supports 5 icon styles of which 3 are freely available (partially).

This option is an object with the style names as property and an array with all icon names you wish to use from those styles

  icons: {
    solid: [ 'faHome', ... ],
    regular: [ ... ],
    light: [ ... ],
    duotone: [ ... ],
    brands: [ ...]
  }

Although not recommended, you can use true to include the full icon set:

  icons: {
    solid: true
  }

proIcons

See icons for how to use, but always uses pro imports.

addCss

• Default: true

If the module should automatically add the fontawesome styles to the global css config. It works by unshifting @fortawesome/fontawesome-svg-core/styles.css onto the nuxt.options.css property.

suffix

• Default: false

Boolean whether to append -icon to the icon component name. This option exists as the component name option is also used for the layer components and you might not want to add '-icon' to those

  // config
  component: 'Fa',
  suffix: true

  // usage
  <fa-icon />
  <fa-layer />

  // config
  component: 'FaIcon',
  suffix: false

  // usage
  <fa-icon />
  <fa-icon-layers />

imports deprecated

Import icons/whole sets from chosen packages. This is the old configuration and will likely be removed in a future version. Use icons instead

• Default: [], no icons will be imported here (see below, can be loaded later inside .vue file)
  • set - path to node package for import, like @fortawesome/free-solid-svg-icons
  • icons - array of icons to import ['faAdjust', 'faArchive'].

  imports: [
    {
      set: '@fortawesome/free-solid-svg-icons',
      icons: ['faHome']
    }
  ]

Usage

You can find more details under example folder. Also please see vue-fontawesome for additional reference

• Ensure you have installed an icon package yarn add @fortawesome/free-solid-svg-icons -D
• and have added the module configuration to your nuxt.config.js

Default component names are:

• <font-awesome-icon>
• <font-awesome-layers>
• <font-awesome-layers-text>

With component option set, -layers and -layers-text suffixes will be appended (see example below)

  // nuxt.config
  fontawesome: {
    icons: {
      solid: ['faHome'],
      regular: ['faAdjust']
    }
  },

• Use global icons:

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'adjust']"  />
    <font-awesome-icon icon="dollar-sign"  style="font-size: 30px"/>
    <font-awesome-icon icon="cog"/>

    <font-awesome-layers class="fa-4x">
      <font-awesome-icon icon="circle"/>
      <font-awesome-icon icon="check" transform="shrink-6" :style="{ color: 'white' }"/>
    </font-awesome-layers>

    <font-awesome-layers full-width class="fa-4x">
      <font-awesome-icon icon="calendar"/>
      <font-awesome-layers-text transform="shrink-8 down-3" value="27" class="fa-inverse" />
    </font-awesome-layers>
  </div>
</template>

<script></script>

• Use locally imported icons

<template>
    <div>
        <fa-layers full-width class="fa-4x">
          <fa :icon="fas.faCircle"/>
          <fa-layers-text transform="shrink-12" value="GALSD" class="fa-inverse" />
        </fa-layers>

        <fa :icon="fas.faAddressBook"  />
        <fa :icon="faGithub" />
    </div>
</template>

<script>
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons'

export default {
  computed: {
    fas () {
       return fas // NOT RECOMMENDED
    },
    faGithub () {
       return faGithub
    }
  },
}
</script>

Integrations

Storybook

If you are fan of storybook this might be interesting for you, This module provides a story to list and search available icons of your project. You can see stories under stories directory. If you are using @nuxtjs/storybook you can see the fontawesome stories under Modules section in your storybook. By default Font Awesome story will shows in your storybook, you disable/hide the story using Storybook's modules option

License

MIT License

This module was forked from the (font) awesome module created by Galley Web Development

Copyright (c) Nuxt Community