perf: refactor emSize to reduce iterations

src/cli/__snapshots__/index.test.js.snap

@@ -14,20 +14,6 @@ export default One;
 "
 `;
 
-exports[`cli --icon 2`] = `
-"import React from \\"react\\";
-
-const Two = props => (
-  <svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
-    <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
-  </svg>
-);
-
-export default Two;
-
-"
-`;
-
 exports[`cli --ids 1`] = `
 "import React from \\"react\\";
 

src/cli/index.test.js

@@ -32,8 +32,6 @@ describe('cli', () => {
   it('--icon', async () => {
     const [stdout] = await exec('bin/svgr --icon __fixtures__/one.svg')
     expect(stdout).toMatchSnapshot()
-    const [stdout2] = await exec('bin/svgr --icon __fixtures__/two.svg')
-    expect(stdout2).toMatchSnapshot()
   })
 
   it('--ref', async () => {

src/h2x/__snapshots__/emSize.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`emSize should add width & height if not present 1`] = `
+"<svg width=\\"1em\\" height=\\"1em\\">
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;
+
+exports[`emSize should keep other attributes 1`] = `
+"<svg viewBox=\\"0 0 10 10\\" width=\\"1em\\" height=\\"1em\\">
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;
+
+exports[`emSize should replace width and height value by 1em 1`] = `
+"<svg width=\\"1em\\" height=\\"1em\\">
+  <g stroke=\\"#063855\\" strokeWidth={2} />
+</svg>
+"
+`;

src/h2x/emSize.js

@@ -12,13 +12,31 @@ const emSize = () => ({
   visitor: {
     JSXElement: {
       enter(path) {
-        if (path.node.name === 'svg' && !path.node.attributes.some(attr => attr && attr.name === 'width' && attr.value === '1em') && !path.node.attributes.some(attr => attr && attr.name === 'height' && attr.value === '1em')) {
-          const nextAttrs = path.node.attributes.filter(attr => attr.name !== 'width' && attr.name !== 'height');
-          nextAttrs.push(makeSizeAttr('width'));
-          nextAttrs.push(makeSizeAttr('height'));
-          path.node.attributes = nextAttrs;
-          path.replace(path.node);
-        }
+        // Skip if not svg node
+        if (path.node.name !== 'svg') return
+
+        // Split attributes into two arrays
+        const sizeAttributes = []
+        const otherAttributes = []
+        path.node.attributes.forEach(attr => {
+          if (attr.name === 'width' || attr.name === 'height')
+            sizeAttributes.push(attr)
+          else otherAttributes.push(attr)
+        })
+
+        // Skip if size attributes are correctly set
+        if (
+          sizeAttributes.length === 2 &&
+          sizeAttributes.every(attr => attr.value === '1em')
+        )
+          return
+
+        path.node.attributes = [
+          ...otherAttributes,
+          makeSizeAttr('width'),
+          makeSizeAttr('height'),
+        ]
+        path.replace(path.node)
       },
     },
   },

src/h2x/emSize.test.js

@@ -0,0 +1,38 @@
+import jsx from 'h2x-plugin-jsx'
+import h2x from '../plugins/h2x'
+import emSize from './emSize'
+
+describe('emSize', () => {
+  it('should add width & height if not present', () => {
+    const result = h2x(
+      `<svg>
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, emSize] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
+  it('should replace width and height value by 1em', () => {
+    const result = h2x(
+      `<svg width="10px" height="10px">
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, emSize] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+
+  it('should keep other attributes', () => {
+    const result = h2x(
+      `<svg viewbox="0 0 10 10" width="10px" height="10px">
+        <g stroke="#063855" stroke-width="2" />
+      </svg>`,
+      { plugins: [jsx, emSize] },
+    )
+
+    expect(result).toMatchSnapshot()
+  })
+})