diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md index be32c6d9f238c..989249ab7353c 100644 --- a/packages/gatsby-plugin-manifest/README.md +++ b/packages/gatsby-plugin-manifest/README.md @@ -188,6 +188,36 @@ module.exports = { } ``` +## Custom icon options + +In order to specify manifest options merged with each item of the `icons` array, `icon_options` may be used as follows: + +```js +// in gatsby-config.js +module.exports = { + plugins: [ + { + resolve: `gatsby-plugin-manifest`, + options: { + name: `GatsbyJS`, + short_name: `GatsbyJS`, + start_url: `/`, + background_color: `#f7f0eb`, + theme_color: `#a2466c`, + display: `standalone`, + icon: `src/images/icon.png`, // This path is relative to the root of the site. + icon_options: { + // For all the options available, please see: + // https://developer.mozilla.org/en-US/docs/Web/Manifest + // https://w3c.github.io/manifest/#purpose-member + purpose: `maskable`, + }, + }, + }, + ], +} +``` + ## Legacy option iOS 11.3 added support for service workers but not the complete webmanifest spec. Therefore iOS won't recognize the icons defined in the webmanifest and the creation of `apple-touch-icon` links in `` is needed. This plugin creates them by default. If you don't want those icons to be generated you can set the `legacy` option to `false` in plugin configuration: diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js index b7a0c8252e016..f2a845a758080 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-node.js +++ b/packages/gatsby-plugin-manifest/src/gatsby-node.js @@ -54,6 +54,11 @@ exports.onPostBootstrap = async (args, pluginOptions) => { manifest.icons = defaultIcons } + // Specify extra options for each icon (if requested). + manifest.icons.forEach(icon => { + Object.assign(icon, pluginOptions.icon_options) + }) + // Determine destination path for icons. const iconPath = path.join(`public`, path.dirname(manifest.icons[0].src))