fix: keep viewBox when dimensions are removed (#281)

gregberge · Mar 10, 2019 · f476c8e · f476c8e · vercel · Mar 10, 2019
1 parent 31cb597
commit f476c8e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 3 deletions.
diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
@@ -218,7 +218,7 @@ exports[`cli should support various args: --no-dimensions 1`] = `
 "import React from 'react'
 
 const SvgFile = props => (
-  <svg {...props}>
+  <svg viewBox=\\"0 0 48 1\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )

diff --git a/packages/core/src/__snapshots__/convert.test.js.snap b/packages/core/src/__snapshots__/convert.test.js.snap
@@ -4,7 +4,7 @@ exports[`convert config should support options { dimensions: false } 1`] = `
 "import React from 'react'
 
 const SvgComponent = props => (
-  <svg {...props}>
+  <svg viewBox=\\"0 0 88 88\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}

diff --git a/packages/plugin-svgo/src/__snapshots__/index.test.js.snap b/packages/plugin-svgo/src/__snapshots__/index.test.js.snap
@@ -6,6 +6,8 @@ exports[`svgo should not load runtime configuration with \`runtimeConfig: false\
 
 exports[`svgo should not remove viewBox with icon option 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
 
+exports[`svgo should not remove viewBox with when dimensions is false 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
+
 exports[`svgo should optimize svg 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
 
 exports[`svgo should support config.svgoConfig 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><desc>Created with Sketch.</desc><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;

diff --git a/packages/plugin-svgo/src/index.js b/packages/plugin-svgo/src/index.js
@@ -87,7 +87,8 @@ function getBaseSvgoConfig(config) {
   const baseSvgoConfig = {
     plugins: [{ prefixIds: true }],
   }
-  if (config.icon) baseSvgoConfig.plugins.push({ removeViewBox: false })
+  if (config.icon || config.dimensions === false)
+    baseSvgoConfig.plugins.push({ removeViewBox: false })
   return baseSvgoConfig
 }
 

diff --git a/packages/plugin-svgo/src/index.test.js b/packages/plugin-svgo/src/index.test.js
@@ -83,6 +83,16 @@ describe('svgo', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('should not remove viewBox with when dimensions is false', () => {
+    const result = svgo(
+      baseSvg,
+      { svgo: true, dimensions: false, runtimeConfig: true },
+      { filePath: path.join(__dirname, '../__fixtures__/svgo') },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
   it('should be possible to disable id prefixing', () => {
     const result = svgo(
       baseSvg,