Nuxt Font Awesome 5
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
tomodules
section - Configure loaded icons/whole sets
- Add
-
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
tofa
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