Module to use Font Awesome icons in your Nuxt.js project. Uses vue-fontawesome under the hood
- 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/fontawesometobuildModulesin yournuxt.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
}
}]
]- 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
- 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 ... />
- 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 ... />
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
}See icons for how to use, but always uses pro imports.
- 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.
- 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 />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-iconsicons- 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
- 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>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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent