fix(babel-preset): expandProps + icon option

Closes #277

Author: gregberge

packages/babel-preset/src/index.js

@@ -63,6 +63,7 @@ const plugin = (api, opts) => {
 
   const plugins = [
     [transformSvgComponent, opts],
+    ...(opts.icon && opts.dimensions ? [svgEmDimensions] : []),
     [
       removeJSXAttribute,
       { elements: ['svg', 'Svg'], attributes: toRemoveAttributes },
@@ -81,10 +82,6 @@ const plugin = (api, opts) => {
     ])
   }
 
-  if (opts.icon && opts.dimensions) {
-    plugins.push(svgEmDimensions)
-  }
-
   if (opts.titleProp) {
     plugins.push(svgDynamicTitle)
   }

packages/babel-preset/src/index.test.js

@@ -24,12 +24,12 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-
-const SvgComponent = () => <svg foo=\\"bar\\" x={y} />;
-
-export default SvgComponent;"
-`)
+                  "import React from \\"react\\";
+                  
+                  const SvgComponent = () => <svg foo=\\"bar\\" x={y} />;
+                  
+                  export default SvgComponent;"
+            `)
   })
 
   it('should handle native expo option', () => {
@@ -41,13 +41,13 @@ export default SvgComponent;"
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-import { Svg } from \\"expo\\";
-
-const SvgComponent = () => <Svg><Svg.G><Svg.Path d=\\"M0 0h48v1H0z\\" /></Svg.G></Svg>;
-
-export default SvgComponent;"
-`)
+                  "import React from \\"react\\";
+                  import { Svg } from \\"expo\\";
+                  
+                  const SvgComponent = () => <Svg><Svg.G><Svg.Path d=\\"M0 0h48v1H0z\\" /></Svg.G></Svg>;
+                  
+                  export default SvgComponent;"
+            `)
   })
 
   it('should handle titleProp', () => {
@@ -59,14 +59,14 @@ export default SvgComponent;"
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-
-const SvgComponent = ({
-  title
-}) => <svg><title>{title}</title></svg>;
-
-export default SvgComponent;"
-`)
+                  "import React from \\"react\\";
+                  
+                  const SvgComponent = ({
+                    title
+                  }) => <svg><title>{title}</title></svg>;
+                  
+                  export default SvgComponent;"
+            `)
   })
 
   it('should handle replaceAttrValues', () => {
@@ -81,11 +81,30 @@ export default SvgComponent;"
         },
       }),
     ).toMatchInlineSnapshot(`
-"import React from \\"react\\";
-
-const SvgComponent = () => <svg a=\\"black\\" b={props.white} />;
+                  "import React from \\"react\\";
+                  
+                  const SvgComponent = () => <svg a=\\"black\\" b={props.white} />;
+                  
+                  export default SvgComponent;"
+            `)
+  })
 
-export default SvgComponent;"
-`)
+  it('should handle expandProps & icon & dimensions', () => {
+    expect(
+      testPreset('<svg a="#000" b="#fff" />', {
+        expandProps: 'end',
+        icon: true,
+        dimensions: true,
+        state: {
+          componentName: 'SvgComponent',
+        },
+      }),
+    ).toMatchInlineSnapshot(`
+      "import React from \\"react\\";
+      
+      const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" {...props} />;
+      
+      export default SvgComponent;"
+    `)
   })
 })