Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pimlie/nuxt-rfg-icon
Automatically generate favicon's and app icon's using RealFaviconGenerator
https://github.com/pimlie/nuxt-rfg-icon
favicon manifest nuxt nuxt-module realfavicongenerator
Last synced: 3 months ago
JSON representation
Automatically generate favicon's and app icon's using RealFaviconGenerator
- Host: GitHub
- URL: https://github.com/pimlie/nuxt-rfg-icon
- Owner: pimlie
- License: other
- Created: 2017-07-02T10:35:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-14T10:56:49.000Z (almost 5 years ago)
- Last Synced: 2024-10-20T04:58:05.598Z (4 months ago)
- Topics: favicon, manifest, nuxt, nuxt-module, realfavicongenerator
- Language: JavaScript
- Size: 709 KB
- Stars: 88
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# RealFaviconGenerator Favicon's for NUXT
[](https://www.npmjs.com/package/nuxt-rfg-icon)
[](https://www.npmjs.com/package/nuxt-rfg-icon)
> Automatically generates favicons and app icons with different sizes using [rfg-api](https://github.com/RealFaviconGenerator/rfg-api).
- This module adds link and meta tags for the appropiate favicon's to `head`
- The generated manifest.json is added to `@nuxtjs/manifest`, so should not overwrite existing properties
## Setup
> nuxt-rfg-icon will by default not run in dev mode, set NODE_ENV=production to override
- Install from npm `npm install --save nuxt-rfg-icon` or use yarn
- Add `nuxt-rfg-icon` to `modules` section of `nuxt.config.js` *before* the line `@nuxtjs/manifest`
```js
modules: [
// Simple usage
'nuxt-rfg-icon',
'@nuxtjs/manifest',
// With options
['nuxt-rfg-icon', { masterPicture: '' }],
// or use global options
'rfg-icon': {
static: true,
staticPath: '/_favicons/',
masterPicture: 'static/icon.png',
rfg:
}
]
````
- Create `static/icon.png`. Recommended to be square png and >= `512x512px`
## Options
### `masterPicture`
- Default: `[srcDir]/static/icon.png`
### `static`
- Default: `true`
If false, icon files will be added as webpack assets during each build. There is no intermediate saving. If true, the headers to be added are saved as `headers.json`. If headers.json and manifest.json exists while building, the existing files are used and not retrieved from the RealFaviconGenerator api unless `force` is ticked
### `staticPath`
- Default: `icons`
The static path where the favicons will be saved if `static` is enabled`
### `force`
- Default: `false`
If true and static files is enabled, force to retrieve new favicons from the RealFaviconGenerator api even when `headers.json` and `manifest.json` exist
### `rfg`
The faviconDescription configuration from [realfavicongenerator.net](https://realfavicongenerator.net/). Upload your image on the website and choose your settings. Next click on `Generate favicons`, click on the tab `Node CLI` and copy the contents of the `faviconDescription.json` file to your `nuxt.config.js`
- Default
```js
rfg: {
design: {
ios: {
pictureAspect: 'backgroundAndMargin',
backgroundColor: '#ffffff',
margin: '14%',
assets: {
ios6AndPriorIcons: false,
ios7AndLaterIcons: false,
precomposedIcons: false,
declareOnlyDefaultIcon: true
}
},
desktopBrowser: {},
windows: {
pictureAspect: 'whiteSilhouette',
backgroundColor: '#ffffff',
onConflict: 'override',
assets: {
windows80Ie10Tile: false,
windows10Ie11EdgeTiles: {
small: false,
medium: true,
big: false,
rectangle: false
}
}
},
androidChrome: {
pictureAspect: 'noChange',
themeColor: '#ffffff',
manifest: {
display: 'standalone',
orientation: 'notSet',
onConflict: 'override',
declared: true
},
assets: {
legacyIcon: false,
lowResolutionIcons: false
}
},
safariPinnedTab: {
pictureAspect: 'silhouette',
themeColor: '#5bbad5'
}
},
settings: {
scalingAlgorithm: 'Mitchell',
errorOnImageTooSmall: false
}
}
```