Skip to content

Nuxt module for Fontawesome 5 integration with ES6 imports and tree shaking

License

Notifications You must be signed in to change notification settings

vaso2/nuxt-fontawesome

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nuxt Font Awesome 5

npm (scoped with tag) npm

Plugin to join nuxt and Font Awesome 5 icons using official vue-fontawesome plugin. Supports ES6 imports with tree shaking and fix of initial load flickering

Setup

  • Add dependencies using npm to your project
    npm i nuxt-fontawesome
    Also it may be needed to explicitly install fontawesome, if your webpack build fails
    npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

  • Configure nuxt.config.js:

    • Add nuxt-fontawesome to modules section
    • Configure loaded icons/whole sets
  • See more details about usage below

{
  modules: [
    'nuxt-fontawesome',
    //OR like this
    ['nuxt-fontawesome', {
      component: 'fa', 
      imports: [
        //import whole set
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
        //import 2 icons from set 
        // please note this is PRO set in this example, 
        // you must have it in your node_modules to actually import
        {
          set: '@fortawesome/pro-regular-svg-icons',
          icons: ['faAdjust', 'faArchive']
        }
      ]
    }]
  ],
  //alternative place for config
  fontawesome: {
    imports: [
      ...
    ]
  }
}

Module options

component

Change component name. For example, fa to use like <fa ... />

  • Default: font-awesome-icon

imports

Import icons/whole sets from chosen packages

  • 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'].

Usage

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

  • Add needed dependency, like
    npm i @fortawesome/free-solid-svg-icons
  • Add configuration like this in nuxt.config.js

Component names by default:

  • <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)

{
  fontawesome: {
    imports: [
        {
          set: '@fortawesome/pro-regular-svg-icons',
          icons: ['faAdjust']
        },
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
    ],
  },
}

Then use

<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>
  • Load and use directly in template. Component name changed in nuxt.config.js to fa
fontawesome: {
  component: 'fa'
},
<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
      },
      faGithub () {
         return faGithub
      }
    },
  }
</script>

License

MIT, made by Galley Web Development

About

Nuxt module for Fontawesome 5 integration with ES6 imports and tree shaking

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published