Skip to content

Commit

Permalink
Merge pull request #14 from drolsen/dev
Browse files Browse the repository at this point in the history 
Dev 1.3.2 Release
  • Loading branch information
@drolsen
drolsen authored Jan 21, 2022
2 parents a95fbde + 2e15121 commit e60d9d0
Show file tree
Hide file tree
Showing 12 changed files with 3,569 additions and 90 deletions.
14 changes: 8 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
</div>

### Does this plugin work with Webpack 4?
No, you should checkout https://github.com/jantimon/favicons-webpack-plugin for a Webpack4 compatible plugin.
No, you should checkout https://github.com/jantimon/favicons-webpack-plugin for a Webpack 4 compatible plugin.


### How does it works
By tapping into the Webpack 5's latest hook updates, WebackFavicon digs into the build to search for any instances of HTML file assets.
By tapping into the Webpack 5's latest hooks, WebackFavicon digs into a given build to search for any instances of HTML file assets.
While doing that, it leverages the favicon (https://github.com/itgalaxy/favicons) module to generate configured favicons off your provided source file.

Once everything is done, you have device and browser specific generated favicons from a single source and any / all HTML files now have corresponding link tags now injected.
Once done, you will have device or browser specific generated favicons written to disk while HTML files (with a `<head>` tag) will have corresponding `<link />` tags injected.

---
## Install
Expand Down Expand Up @@ -52,20 +52,20 @@ module.exports = {
background: '#000',
theme_color: '#000',
icons: {
favicons: true,
favicons: true
}
})
]
};
```

Will result in file being written to:
Will result in file(s) being written to:
- /dist/img/favicon.ico
- /dist/img/favicon16x16.png
- /dist/img/favicon32x32.png
- /dist/img/favicon48x48.png

While our HTML file will have paths to favicons as:
While any HTML with a `<head>` tag file will have paths to favicons added:
```html
<link rel="shortcut icon" href="/~media/img/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/~media/img/favicon-16x16.png">
Expand Down Expand Up @@ -106,7 +106,9 @@ Option | Type | Description
`icons` | Object | See below for more details about this object's options.



## Icon Object's Options

Option | Type | Description
--- | --- | ---
`android` | Boolean | Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
Expand Down
Binary file added assets/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 21 additions & 42 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
const fs = require('fs');
const path = require('path');
const { sources } = require('webpack');

class WebpackFavicons {
constructor(options) {
Expand All @@ -25,17 +24,19 @@ class WebpackFavicons {
logging: false, // Print logs to console? `boolean`
pixel_art: false, // Keeps pixels "sharp" when scaling up, for pixel art. Only supported in offline mode.
loadManifestWithCredentials: false, // Browsers don't send cookies when fetching a manifest, enable this to fix that. `boolean`
icons: {
android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
coast: true, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
favicons: true, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
firefox: true, // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
windows: true, // Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
yandex: true // Create Yandex browser icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
}
icons: { favicons: true }
}, options);

this.options.icons = Object.assign({
android: false, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
appleIcon: false, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
appleStartup: false, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
coast: false, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
favicons: false, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
firefox: false, // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
windows: false, // Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
yandex: false // Create Yandex browser icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }` or an array of sources
}, this.options.icons);
}

apply(compiler) {
Expand All @@ -60,14 +61,9 @@ class WebpackFavicons {
this.options.src,
this.options,
(error, response) => {
if (error) {
console.error(error.message); // Error description e.g. "An unknown error has occurred"
return;
}
if (error) { console.error(error.message); return; }

this.html = response.html.join('\r');
this.files = response.files;
this.images = response.images;

// Adds favicon markup to any html documents
Object.keys(assets).map((i) => {
Expand All @@ -82,28 +78,25 @@ class WebpackFavicons {
});
}

assets[i]._value = HTML.replace(
/<head>([\s\S]*?)<\/head>/,
`<head>$1\r${this.html}</head>`
);
assets[i]._value = HTML.replace(/<head>([\s\S]*?)<\/head>/, `<head>$1\r${this.html}</head>`);
}
});

// Adds generated images to build
if (this.images) {
Object.keys(this.images).map((i) => {
let image = this.images[i];
assets[path.normalize(`/${this.options.path}/${image.name}`).replace(/\\/g, '/')] = {
if (response.images) {
Object.keys(response.images).map((i) => {
let image = response.images[i];
assets[path.normalize(`/${this.options.path}/${image.name}`)] = {
source: () => image.contents,
size: () => image.contents.length
};
});
}

// Adds manifest json and xml files to build
if (this.files) {
Object.keys(this.files).map((i) => {
let file = this.files[i];
if (response.files) {
Object.keys(response.files).map((i) => {
let file = response.files[i];
assets[path.normalize(`/${this.options.path}/${file.name}`)] = {
source: () => file.contents,
size: () => file.contents.length
Expand All @@ -117,20 +110,6 @@ class WebpackFavicons {
}
);
});

// Images and Manifest
compiler.hooks.compilation.tap({ name: 'WebpackFavicons'}, (compilation) => {
compilation.hooks.processAssets.tap(
{
name: 'WebpackFavicons',
stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL, // see below for more stages
additionalAssets: false
},
(assets) => {

}
);
});
}
}
}
Expand Down
Loading

0 comments on commit e60d9d0

Please sign in to comment.