diff --git a/README.md b/README.md
index 3ebefc3..e5148e6 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ No, you should checkout https://github.com/jantimon/favicons-webpack-plugin for
### How does it works
-By tapping into the Webpack5'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 hook updates, WebackFavicon digs into the 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.
@@ -35,17 +35,45 @@ yarn add --dev webpack-favicons
const WebpackFavicons = require('webpack-favicons');
```
Instantiate a `new WebpackFavicons()` class within Webpack configuration's plugin array:
+
```js
+
+// Basic configuration
+
module.exports = {
- "plugins": [
+ output: {
+ path: '/dist',
+ publicPath: '/~media/'
+ }
+ plugins: [
new WebpackFavicons({
- src: 'path/to/favicon.svg'
+ src: 'assets/favicon.svg',
+ path: 'img',
+ background: '#000',
+ theme_color: '#000',
+ icons: {
+ favicons: true,
+ }
})
]
};
```
-Recommended that your source favicon file be a SVG vector file. This allow for best possible quality of generated pixel based favicons.
+Will result in file 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:
+```html
+
+
+
+
+```
+
+It is recommended that your source favicon file be a SVG vector file to allow best possible quality to generated pixel based favicons from.
## Options
@@ -56,7 +84,7 @@ For much more information about these options please visit: https://github.com/i
Option | Type | Description
--- | --- | ---
`src` | String | Path to the source favicon file which all favicons will be generated from
-`path` | String | Path for overriding default icons path.
+`path` | String | Path to where icons get written (is relative to webpack's `output.path`)
`appName` | String | Your application's name.
`appShortName` | String | Your application's short_name. (Optional. If not set, appName will be used)
`appDescription` | String | Your application's description.
@@ -77,6 +105,7 @@ Option | Type | Description
`loadManifestWithCredentials` | Boolean | Browsers don't send cookies when fetching a manifest, enable this to fix that.
`icons` | Object | See below for more details about this object's options.
+
## Icon Object's Options
Option | Type | Description
--- | --- | ---
diff --git a/index.js b/index.js
index 405b149..2eae9d0 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,5 @@
const fs = require('fs');
+const path = require('path');
const favicons = require('favicons');
class WebpackFavicons {
@@ -75,7 +76,9 @@ class WebpackFavicons {
let HTML = assets[i]._value.toString();
if (compiler.options.output.publicPath !== 'auto') {
- this.html = this.html.replace(/href="/g, `href="${compiler.options.output.publicPath}`);
+ this.html = this.html.replace(/href="(.*?)"/g, (match, p1, string) => {
+ return `href="${path.normalize(`${compiler.options.output.publicPath}/${p1}`)}"`.replace(/\\/g, '/')
+ });
}
assets[i]._value = HTML.replace(
@@ -103,7 +106,7 @@ class WebpackFavicons {
if (this.images) {
Object.keys(this.images).map((i) => {
let image = this.images[i];
- assets[`${this.options.path}${image.name}`] = {
+ assets[path.normalize(`\/${this.options.path}/${image.name}`)] = {
source: () => image.contents,
size: () => image.contents.length
};
@@ -114,7 +117,7 @@ class WebpackFavicons {
if (this.files) {
Object.keys(this.files).map((i) => {
let file = this.files[i];
- assets[`${this.options.path}${file.name}`] = {
+ assets[path.normalize(`\/${this.options.path}/${file.name}`)] = {
source: () => file.contents,
size: () => file.contents.length
};
diff --git a/package.json b/package.json
index 5528bbe..d935c85 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
"webpack html favicon",
"webpack favicons"
],
- "version": "1.2.0",
+ "version": "1.2.5",
"description": "Webpack plugin to generate favicons for devices and browsers",
"repository": "drolsen/webpack-favicons",
"bugs": {
@@ -21,6 +21,7 @@
"basic-test": "webpack --config ./test/basic.config.js --mode production",
"nested-test": "webpack --config ./test/nested.config.js --mode production",
"public-test": "webpack --config ./test/public-path.config.js --mode production",
+ "mixed-test": "webpack --config ./test/mixed-path.config.js --mode production",
"ava-test": "ava ./test/ava.test.js"
},
"engines": {
diff --git a/test/mixed-path.config.js b/test/mixed-path.config.js
new file mode 100644
index 0000000..89783f0
--- /dev/null
+++ b/test/mixed-path.config.js
@@ -0,0 +1,60 @@
+const WebpackFavicons = require('../index.js');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+ entry: path.resolve(__dirname, 'test.js'),
+ output: {
+ path: path.resolve(__dirname, '../dist/mixed'),
+ publicPath: '/~media/',
+ filename: 'test.js',
+ pathinfo: false
+ },
+ module: {
+ rules: [{
+ 'test': /\.html$/,
+ 'exclude': /node_modules/,
+ 'include': [
+ path.resolve(__dirname, 'test.html')
+ ],
+ 'use': {
+ 'loader': 'html-loader', // (see: https://www.npmjs.com/package/html-loader)
+ 'options': { 'minimize': false }
+ }
+ }]
+ },
+ optimization: {
+ minimize: false
+ },
+ plugins: [
+ new CleanWebpackPlugin({
+ 'cleanOnceBeforeBuildPatterns': [path.resolve(__dirname, '../dist/mixed')]
+ }),
+ new HtmlWebpackPlugin({
+ 'title': 'Basic Test',
+ 'template': './test/test.html',
+ 'filename': './test.html',
+ 'minify': false
+ }),
+ new WebpackFavicons({
+ 'src': 'assets/favicon.svg',
+ 'path': 'assets',
+ 'background': '#000',
+ 'theme_color': '#000',
+ 'icons': {
+ 'android': false,
+ 'appleIcon': false,
+ 'appleStartup': false,
+ 'coast': false,
+ 'favicons': true,
+ 'firefox': false,
+ 'opengraph': false,
+ 'twitter': false,
+ 'yandex': false,
+ 'windows': false
+ }
+ })
+ ]
+};
+