Repository: smooth-code/svgr (js)

Issue:
Preserving viewBox
Hi,

First of all, thank you for this amazing library, it is great!

With version 1.0.0, `viewBox` is dropped. In my case I have some illustrations that I inline, they are not icons but I still need `viewBox` to scale them.

I would be happy to contribute and help, but in order to understand where you come from: what is the rationale behind removing `viewBox` for "non-icons"?

Pull request description:
Add viewBox option that defaults to `true`
Fixes #18.

Patch:
diff --git a/README.md b/README.md
index 9ec08e7..ec30254 100644
--- a/README.md
+++ b/README.md
@@ -262,12 +262,19 @@ Default | CLI Override | API Override
 `true`  | `--no-expand-props` | `expandProps: <bool>`
 
 ### Icon
-Preserve viewBox property and replace SVG "width" and "height" value by "1em" in order to make SVG size inherits from text size. Also remove title.
+Replace SVG "width" and "height" value by "1em" in order to make SVG size inherits from text size. Also remove title.
 
 Default | CLI Override | API Override
 --------|--------------|-------------
 `false`  | `--icon` | `icon: <bool>`
 
+### ViewBox
+Setting this to `false` will remove the viewBox property.
+
+Default | CLI Override | API Override
+--------|--------------|-------------
+`true`  | `--no-view-box` | `viewBox: <bool>`
+
 ### Replace attribute value
 Replace an attribute value by an other. The main usage of this option is to change
 an icon color to "currentColor" in order to inherit from text color.
diff --git a/src/cli/index.js b/src/cli/index.js
index b876f6d..1ef98f1 100644
--- a/src/cli/index.js
+++ b/src/cli/index.js
@@ -24,6 +24,7 @@ program
   .option('--template <file>', 'specify a custom template to use')
   .option('--no-expand-props', 'disable props expanding')
   .option('--icon', 'use "1em" as width and height')
+  .option('--no-view-box', 'remove viewBox')
   .option(
     '--replace-attr-value [old=new]',
     'replace an attribute value',
diff --git a/src/configToOptions.js b/src/configToOptions.js
index 901c6ca..64ff611 100644
--- a/src/configToOptions.js
+++ b/src/configToOptions.js
@@ -11,6 +11,7 @@ const defaultConfig = {
   svgo: true,
   prettier: true,
   icon: false,
+  viewBox: true,
   replaceAttrValues: [],
   expandProps: true,
   title: true,
@@ -44,7 +45,7 @@ function configToOptions(config = {}) {
     const svgoConfig = { plugins }
     if (!config.title || config.icon) plugins.push({ removeTitle: {} })
     else if (config.title) plugins.push({ removeTitle: false })
-    if (config.icon) plugins.push({ removeViewBox: false })
+    if (config.viewBox) plugins.push({ removeViewBox: false })
     if (config.precision === 'number')
       svgoConfig.floatPrecision = Number(svgoConfig.precision)
     return svgoConfig


Test patch:
diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap
index c5080f8..7afd709 100644
--- a/src/__snapshots__/index.test.js.snap
+++ b/src/__snapshots__/index.test.js.snap
@@ -50,7 +50,7 @@ exports[`convert should convert using config 1`] = `
 "import React from \\"react\\";
 
 const SvgComponent = props => (
-  <svg width={88} height={88} {...props}>
+  <svg width={88} height={88} viewBox=\\"0 0 88 88\\" {...props}>
     <title>Dismiss</title>
     <g
       stroke=\\"#063855\\"
@@ -72,7 +72,7 @@ exports[`convert should remove style tags 1`] = `
 "import React from \\"react\\";
 
 const SvgComponent = props => (
-  <svg width={88} height={88} {...props}>
+  <svg width={88} height={88} viewBox=\\"0 0 88 88\\" {...props}>
     <title>Dismiss</title>
     <g fill=\\"red\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
       <g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
diff --git a/src/cli/__snapshots__/index.test.js.snap b/src/cli/__snapshots__/index.test.js.snap
index d035bd4..9e9002d 100644
--- a/src/cli/__snapshots__/index.test.js.snap
+++ b/src/cli/__snapshots__/index.test.js.snap
@@ -18,7 +18,7 @@ exports[`cli --no-expand-props 1`] = `
 "import React from \\"react\\";
 
 const One = () => (
-  <svg width={48} height={1}>
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\">
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -32,7 +32,7 @@ export default One;
 exports[`cli --no-prettier 1`] = `
 "import React from 'react'
 
-const One = (props) => <svg width={48} height={1} {...props}>
+const One = (props) => <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
   <title>
     Rectangle 5
   </title>
@@ -48,7 +48,7 @@ exports[`cli --no-semi 1`] = `
 "import React from \\"react\\"
 
 const One = props => (
-  <svg width={48} height={1} {...props}>
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -102,8 +102,23 @@ export default One;
 exports[`cli --no-title 1`] = `
 "import React from \\"react\\";
 
+const One = props => (
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
+    <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
+  </svg>
+);
+
+export default One;
+
+"
+`;
+
+exports[`cli --no-view-box 1`] = `
+"import React from \\"react\\";
+
 const One = props => (
   <svg width={48} height={1} {...props}>
+    <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 );
@@ -117,7 +132,7 @@ exports[`cli --precision 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} {...props}>
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -132,7 +147,7 @@ exports[`cli --replace-attr-value 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} {...props}>
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -148,7 +163,7 @@ exports[`cli --template 1`] = `
 
 export default function One() {
   return (
-    <svg width={48} height={1} {...props}>
+    <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
       <title>Rectangle 5</title>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
@@ -162,7 +177,7 @@ exports[`cli should work with a simple file 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} {...props}>
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -177,7 +192,7 @@ exports[`cli should work with output directory 1`] = `
 "import React from \\"react\\";
 
 const One = props => (
-  <svg width={48} height={1} {...props}>
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -191,7 +206,7 @@ exports[`cli should work with output directory 2`] = `
 "import React from \\"react\\";
 
 const Two = props => (
-  <svg width={48} height={11} {...props}>
+  <svg width={48} height={11} viewBox=\\"0 0 48 11\\" {...props}>
     <title>Group 6</title>
     <g stroke=\\"#063855\\" fill=\\"none\\" fillRule=\\"evenodd\\">
       <path d=\\"M0 7l5.317-2.658a6 6 0 0 1 5.366 0l2.634 1.316a6 6 0 0 0 5.366 0l2.634-1.316a6 6 0 0 1 5.366 0l2.634 1.316a6 6 0 0 0 5.366 0l2.634-1.316a6 6 0 0 1 5.366 0L48 7\\" />
@@ -208,7 +223,7 @@ exports[`cli should work with stdin 1`] = `
 "import React from \\"react\\";
 
 const SvgComponent = props => (
-  <svg width={48} height={1} {...props}>
+  <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
     <title>Rectangle 5</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
diff --git a/src/cli/index.test.js b/src/cli/index.test.js
index 01b294a..513a1b9 100644
--- a/src/cli/index.test.js
+++ b/src/cli/index.test.js
@@ -40,6 +40,13 @@ describe('cli', () => {
     expect(stdout).toMatchSnapshot()
   })
 
+  it('--no-view-box', async () => {
+    const [stdout] = await exec(
+      'babel-node src/cli --no-view-box __fixtures__/one.svg',
+    )
+    expect(stdout).toMatchSnapshot()
+  })
+
   it('--replace-attr-value', async () => {
     const [stdout] = await exec(
       'babel-node src/cli --replace-attr-value "#063855=currentColor" __fixtures__/one.svg',