Module to use Font Awesome icons in your Nuxt.js project. Uses vue-fontawesome under the hood
$ 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:
```js
// 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
}
}]
]
component
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
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
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
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
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
deprecatedImport icons/whole sets from chosen packages. This is the old configuration and will likely be removed in a future version. Use icons
instead
[]
, 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']
}
]
You can find more details under example
folder. Also please see vue-fontawesome for additional reference
yarn add @fortawesome/free-solid-svg-icons -D
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>
- Use locally imported icons
```vue
<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>
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
This module was forked from the (font) awesome module created by Galley Web Development
Copyright (c) Nuxt Community