Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gatsby-plugin-manifest): improve SVG->PNG fidelity #11608

Merged
merged 4 commits into from
Feb 19, 2019
Merged

fix(gatsby-plugin-manifest): improve SVG->PNG fidelity #11608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e071b52
gatsby-plugin-manifest: Instruct sharp() to use an appropriate resolu…
rgiese Feb 6, 2019
4292acb
Merge branch 'master' of https://github.com/gatsbyjs/gatsby into topi…
rgiese Feb 13, 2019
670ce79
add sanity check for density value
pieh Feb 18, 2019
944a0d2
Merge remote-tracking branch 'origin/master' into topics/svg-favicon
pieh Feb 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-manifest/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ This plugin configures Gatsby to create a `manifest.webmanifest` file on every s

## Generating icons

It can be tedious creating the multitude of icon sizes required by different devices and browsers. This plugin includes code to auto-generate smaller icons from a larger src image.
It can be tedious creating the multitude of icon sizes required by different devices and browsers. This plugin includes code to auto-generate smaller icons from a larger src image (which can also be an SVG).

There are three modes in which icon generation can function: automatic, hybrid, and manual. These three modes are explained below. Icon generation functions differently depending on which of the three you choose.

Expand Down
5 changes: 3 additions & 2 deletions packages/gatsby-plugin-manifest/src/__tests__/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ describe(`Test plugin manifest options`, () => {
fs.statSync.mockReturnValueOnce({ isFile: () => true })

const icon = `pretend/this/exists.png`
const size = 48

await onPostBootstrap([], {
name: `GatsbyJS`,
Expand All @@ -69,13 +70,13 @@ describe(`Test plugin manifest options`, () => {
icons: [
{
src: `icons/icon-48x48.png`,
sizes: `48x48`,
sizes: `${size}x${size}`,
type: `image/png`,
},
],
})

expect(sharp).toHaveBeenCalledWith(icon)
expect(sharp).toHaveBeenCalledWith(icon, { density: size })
})

it(`fails on non existing icon`, done => {
Expand Down
7 changes: 6 additions & 1 deletion packages/gatsby-plugin-manifest/src/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@ function generateIcons(icons, srcIcon) {
const size = parseInt(icon.sizes.substring(0, icon.sizes.lastIndexOf(`x`)))
const imgPath = path.join(`public`, icon.src)

return sharp(srcIcon)
// For vector graphics, instruct sharp to use a pixel density
// suitable for the resolution we're rasterizing to.
// For pixel graphics sources this has no effect.
// Sharp accept density from 1 to 2400
const density = Math.min(2400, Math.max(1, size))
return sharp(srcIcon, { density })
.resize(size)
.toFile(imgPath)
.then(() => {})
Expand Down