Vite-plugin-favicons-inject NPM

vite-plugin-favicons-inject

A Vite plugin for creating and injecting favicons during the application build!

Install

$ npm install vite-plugin-favicons-inject

Usage

As ES6 Module

// In vite.config.js file

import vitePluginFaviconsInject from 'vite-plugin-favicons-inject';

export default defineConfig({
  plugins: [
    ...
    vitePluginFaviconsInject('./src/assets/logo.svg'),
    ...
  ]
});

As CommonJs

// In vite.config.js file

const vitePluginFaviconsInject = require('vite-plugin-favicons-inject');

export default defineConfig({
  plugins: [
    ...
    vitePluginFaviconsInject('./src/assets/logo.svg'),
    ...
  ]
});

Parameter

source - path of the logo file. Default: ./src/logo.png
config (optional) - favions config object. (refer favicons for all available options).
pluginConfig (optional) - Some internal plugin configurations - Default:
```
{
  failGraciously: false, // set it to `true`for failing without errors(only applicable on exceptional cases)
}
```
Note 'path' option in the config cannot be overriden as it is assigned to vite assetsDir:
```
{
  path: "<vite assets dir>" // destination path of generated favicons based on vite asset dir
}
```
More information about vite assets directory and how to change it can be found here

Development Mode

By default this plugin will not generate any files in the development mode since it will affect the HMR performance and overall development experience.

But, the markup will be injected into the HTML files. If you would like to avoid it you can optionally enable this plugin only on production mode like below:

process.env.NODE_ENV == "production" ? vitePluginFaviconsInject() : false

Note: the above suggestion assume you have a envionment variable called NODE_ENV properly configured in your application on the both production and development environments accordingly.