@flexis/favicons
Version:
A tool for generating icons for the modern web.
254 lines (207 loc) • 7.76 kB
Markdown
[![NPM version][npm]][npm-url]
[![Node version][node]][node-url]
[![Dependencies status][deps]][deps-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]
[![Dependabot badge][dependabot]][dependabot-url]
[![Documentation badge][documentation]][documentation-url]
[]: https://img.shields.io/npm/v/@flexis/favicons.svg
[]: https://npmjs.com/package/@flexis/favicons
[]: https://img.shields.io/node/v/@flexis/favicons.svg
[]: https://nodejs.org
[]: https://david-dm.org/TrigenSoftware/flexis-favicons.svg
[]: https://david-dm.org/TrigenSoftware/flexis-favicons
[]: https://img.shields.io/travis/com/TrigenSoftware/flexis-favicons/master.svg
[]: https://travis-ci.com/TrigenSoftware/flexis-favicons
[]: https://img.shields.io/coveralls/TrigenSoftware/flexis-favicons.svg
[]: https://coveralls.io/r/TrigenSoftware/flexis-favicons
[]: https://api.dependabot.com/badges/status?host=github&repo=TrigenSoftware/flexis-favicons
[]: https://dependabot.com/
[]: https://img.shields.io/badge/API-Documentation-2b7489.svg
[]: https://trigensoftware.github.io/flexis-favicons
A tool for generating icons for the modern web.
- Traditional web favicons ❤️
- Android and iOS icons, iOS startup screens 🖼
- Generates assets for [PWA](https://developers.google.com/web/progressive-web-apps/) 📲
- You can run it from the [CLI](
- Works with [Gulp](
- Based on [Sharp](https://github.com/lovell/sharp) library - lightning fast ⚡️
<img src="https://pbs.twimg.com/media/EAyJvr5WsAEhw3F?format=jpg&name=medium" width="80%">
```sh
npm i -D @flexis/favicons
yarn add -D @flexis/favicons
```
```sh
npx favicons [...sources] [...options]
yarn exec -- favicons [...sources] [...options]
```
| Option | Description | Default |
|--------|-------------|---------|
| sources | Source icon(s) glob patterns. | |
| ‑&
| &
| &
| &
| &
| &
| &
| &
| &
| &
| &
| &
| &
| &
| &
| &
| &
```sh
favicons src/favicon.svg --manifest src/manifest.json --headers -d build
favicons "src/icons/*.png" --background "#FACE8D" --headers -d build
```
Configuration file is optional. If needed, can be defined through `.faviconsrc` JSON file in the root directory of the project.
Supported options:
```ts
interface IConfig {
/**
* Source icon(s) glob patterns.
*/
src?: string | string[];
/**
* Relative public path to use in webmanifest and html-headers.
*/
path?: string;
/**
* Background color for icons and startup images.
*/
background?: string;
/**
* Path to webmanifest or webmanifest object to add icons. Also can use it to get background color.
*/
manifest?: string | IManifestConfig;
/**
* Output icons configuration.
*/
icons?: IIconsConfig;
/**
* Create html-file with headers for icons.
*/
headers?: boolean | IHeadersConfig;
/**
* Print additional info about progress.
*/
verbose?: boolean;
/**
* Destination directory.
*/
dest?: string;
}
```
- [`IIconsConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iiconsconfig.html)
- [`IManifestConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.imanifestconfig.html)
- [`IHeadersConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iheadersconfig.html)
Also you can use `@flexis/favicons` with [Gulp](https://github.com/gulpjs/gulp):
```js
import favicons from '@flexis/favicons/lib/stream';
import manifest from './src/manifest.json';
gulp.task('favicons', () =>
gulp.src('src/favicon.svg')
.pipe(favicons({
manifest,
headers: true
}))
.pipe(gulp.dest('build'))
);
```
Plugin options:
```ts
interface IPluginConfig {
/**
* Relative public path to use in webmanifest and html-headers.
*/
path?: string;
/**
* Background color for icons and startup images.
*/
background?: string;
/**
* Webmanifest to add icons. Also can use it to get background color.
*/
manifest?: IManifestConfig;
/**
* Output icons configuration.
*/
icons?: IIconsConfig;
/**
* Create html-file with headers for icons.
*/
headers?: boolean | IHeadersConfig;
/**
* Print additional info about progress.
*/
verbose?: boolean;
}
```
- [`IIconsConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iiconsconfig.html)
- [`IManifestConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.imanifestconfig.html)
- [`IHeadersConfig`](https://trigensoftware.github.io/flexis-favicons/interfaces/_src_types_.iheadersconfig.html)
Module exposes next API:
```js
export default FaviconsGenerator;
export {
IManifestConfig,
IIconConfig,
IIconsConfig,
IHeadersConfig,
IConfig,
getHtmlHeadersMarkup
};
```
[](https://trigensoftware.github.io/flexis-favicons/index.html)
```js
import {
promises as fs
} from 'fs';
import FaviconsGenerator, {
getHtmlHeadersMarkup
} from '@flexis/favicons';
import Vinyl from 'vinyl';
import manifest from './src/manifest.json';
async function generate() {
const path = 'src/favicon.svg';
const contents = await fs.readFile(path);
const source = new Vinyl({
path,
contents
});
const favicons = new FaviconsGenerator({
manifest
});
const icons = favicons.generateIcons(source);
for await (const icon of icons) {
icon.base = './build';
await fs.writeFile(icon.path, icon.contents);
}
const headers = favicons.generateHtmlHeaders();
const html = getHtmlHeadersMarkup(headers);
await fs.writeFile('build/favicons.html', html);
const manifest = favicons.generateManifset();
const json = JSON.stringify(manifest);
await fs.writeFile('build/manifest.json', json);
}
generate();
```
[<img src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png" width="300">](https://www.browserstack.com)