# nuxt-rfg-icon

> Nuxt.js module for creating favicons with RealFaviconGenerator api

Latest version **0.6.4** (published 2019-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-rfg-icon
pnpm add nuxt-rfg-icon
yarn add nuxt-rfg-icon
bun add nuxt-rfg-icon
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.4 |
| Published | 2019-08-24 |
| First published | 2017-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 89 |
| Maintainers | pimlie |

## Links

- npm: https://www.npmjs.com/package/nuxt-rfg-icon
- Repository: https://github.com/pimlie/nuxt-rfg-icon
- Issues: https://github.com/pimlie/nuxt-rfg-icon/issues
- npm.io page: https://npm.io/package/nuxt-rfg-icon

## Dependencies (7)

- [axios](https://npm.io/package/axios.md) ^0.19.0
- [yauzl](https://npm.io/package/yauzl.md) ^2.10.0
- [rfg-api](https://npm.io/package/rfg-api.md) ^0.5.0
- [lodash.find](https://npm.io/package/lodash.find.md) ^4.6.0
- [lodash.defaults](https://npm.io/package/lodash.defaults.md) ^4.2.0
- [@nuxtjs/manifest](https://npm.io/package/@nuxtjs/manifest.md) ^3.0.0-beta.14
- [lodash.defaultsdeep](https://npm.io/package/lodash.defaultsdeep.md) ^4.6.1

## Recent versions

- 0.6.4 (latest) — 2019-08-24
- 0.6.3 — 2019-03-21
- 0.6.2 — 2019-01-17
- 0.6.1 — 2019-01-17
- 0.6.0 — 2019-01-08
- 0.5.0 — 2018-09-28
- 0.4.3 — 2018-06-04
- 0.4.2 — 2018-04-04
- 0.4.1 — 2018-03-08
- 0.4.0 — 2018-01-27
- 0.3.5 — 2017-08-20
- 0.3.2 — 2017-08-20
- 0.3.1 — 2017-08-16
- 0.3.0 — 2017-08-16
- 0.2.2 — 2017-08-07
- … 4 more at https://npm.io/package/nuxt-rfg-icon/versions

## README

# RealFaviconGenerator Favicon's for NUXT
<a href="https://travis-ci.org/pimlie/nuxt-rfg-icon"><img src="https://api.travis-ci.org/pimlie/nuxt-rfg-icon.svg" alt="Build Status"></a>
[![npm](https://img.shields.io/npm/dt/nuxt-rfg-icon.svg?style=flat-square)](https://www.npmjs.com/package/nuxt-rfg-icon)
[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-rfg-icon/latest.svg?style=flat-square)](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: <faviconDescription.json from realfavicongenerator.net>
   }
  ]
````
- 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
  }
}
```

---
_Source: https://npm.io/package/nuxt-rfg-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._