Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vaso2/nuxt-fontawesome
Nuxt module for Fontawesome 5 integration with ES6 imports and tree shaking
https://github.com/vaso2/nuxt-fontawesome
List: nuxt-fontawesome
Last synced: about 2 months ago
JSON representation
Nuxt module for Fontawesome 5 integration with ES6 imports and tree shaking
- Host: GitHub
- URL: https://github.com/vaso2/nuxt-fontawesome
- Owner: vaso2
- License: mit
- Created: 2018-02-10T01:45:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-04T18:40:06.000Z (almost 5 years ago)
- Last Synced: 2024-05-23T03:03:44.375Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 224 KB
- Stars: 107
- Watchers: 2
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt Font Awesome 5
[](https://npmjs.com/package/nuxt-fontawesome)
[](https://npmjs.com/package/nuxt-fontawesome)
> Plugin to join nuxt and Font Awesome 5 icons using official [vue-fontawesome](https://github.com/FortAwesome/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
```js
{
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
``
- 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](https://github.com/FortAwesome/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:
- ``
- ``
- ``
With `component` option set, `-layers` and `-layers-text` suffixes will be appended (see example below)
```js
{
fontawesome: {
imports: [
{
set: '@fortawesome/pro-regular-svg-icons',
icons: ['faAdjust']
},
{
set: '@fortawesome/free-solid-svg-icons',
icons: ['fas']
},
],
},
}
```
Then use
```vue
```
- Load and use directly in template. Component name changed in `nuxt.config.js` to `fa`
```js
fontawesome: {
component: 'fa'
},
```
```vue
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
}
},
}
```
## License
MIT, made by [Galley Web Development](https://galley.online/)