From f06cb5c4d6adb1d5de672b98056fbef397f93ad8 Mon Sep 17 00:00:00 2001
From: Rob Levin <roblevintennis@gmail.com>
Date: Thu, 8 Oct 2020 08:59:21 -0700
Subject: [PATCH] Updates all the button icon examples to use new SVG icons

---
 agnosticui-css/button.html                    |  4 +-
 .../src/__snapshots__/Storyshots.test.js.snap | 37 ++++-----
 .../src/stories/ButtonIconTest.svelte         | 46 +++++------
 .../src/stories/ButtonIcon.stories.js         | 78 +++++++++----------
 .../src/stories/ButtonIconRight.vue           | 34 --------
 .../src/stories/ButtonIconTests.vue           | 49 +++++++-----
 showcase/src/partials/Buttons.vue             | 70 ++++++++---------
 7 files changed, 143 insertions(+), 175 deletions(-)
 delete mode 100644 agnosticui-vue/src/stories/ButtonIconRight.vue

diff --git a/agnosticui-css/button.html b/agnosticui-css/button.html
index 6e01eae37..856c33b7d 100644
--- a/agnosticui-css/button.html
+++ b/agnosticui-css/button.html
@@ -41,8 +41,8 @@
 
     .demo-icon {
       fill: var(--agnosticui-btn-primary-color);
-      width: 16px;
-      height: 16px;
+      width: 14px;
+      height: 14px;
       opacity: .95;
     }
   </style>
diff --git a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
index 6f1e65e5d..b17f1c659 100644
--- a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
+++ b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
@@ -336,23 +336,24 @@ exports[`Storyshots Button Icons Button Icons 1`] = `
       class="btn btn-primary btn-rounded"
       type="button"
     >
-      Download 
+      Download
+    
       <svg
         aria-hidden="true"
         class="btn-icon-right"
-        height="16"
+        data-custom-icon="true"
+        fill="currentColor"
+        focusable="false"
+        height="14px"
+        stroke="currentColor"
+        stroke-width="0"
         version="1.1"
         viewBox="0 0 16 16"
-        width="16"
+        width="14px"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
-      5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
-      1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
-      0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
-      5.06 14.08 4 12 4z"
-          fill="currentColor"
-          fill-rule="evenodd"
+          d="M14 11v2h-12v-2h-2v4h16v-4zM12 6h-3v-5h-2v5h-3l4 6z"
         />
       </svg>
     </button>
@@ -367,20 +368,20 @@ exports[`Storyshots Button Icons Button Icons 1`] = `
         data-custom-icon="true"
         fill="currentColor"
         focusable="false"
-        height="1em"
+        height="14px"
+        stroke="currentColor"
         stroke-width="0"
-        viewBox="0 0 24 24"
-        width="1em"
+        version="1.1"
+        viewBox="0 0 16 16"
+        width="14px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
-      0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
-      3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
+          d="M11 10c-1 1-1 2-2 2s-2-1-3-2-2-2-2-3 1-1 2-2-2-4-3-4-3 3-3 3c0 2 2.055 6.055 4 8s6 4 8 4c0 0 3-2 3-3s-3-4-4-3z"
         />
       </svg>
-       Call
+      
+    Call
     </button>
   </div>
 </section>
diff --git a/agnosticui-svelte/src/stories/ButtonIconTest.svelte b/agnosticui-svelte/src/stories/ButtonIconTest.svelte
index 2a750ba91..5d6bac95c 100644
--- a/agnosticui-svelte/src/stories/ButtonIconTest.svelte
+++ b/agnosticui-svelte/src/stories/ButtonIconTest.svelte
@@ -13,41 +13,41 @@
 
 <div style="display: inline-flex;">
   <Button isRounded={true} mode="primary">
-    Download <svg
+    Download
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
       class="btn-icon-right"
       viewBox="0 0 16 16"
-      version="1.1"
-      width="16"
-      height="16"
-      aria-hidden="true">
-      <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
-      5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
-      1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
-      0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
-      5.06 14.08 4 12 4z" />
+      stroke-width="0"
+      stroke="currentColor"
+      fill="currentColor"
+      data-custom-icon="true"
+      focusable="false"
+      aria-hidden="true"
+      height="14px"
+      width="14px"
+      version="1.1">
+      <path d="M14 11v2h-12v-2h-2v4h16v-4zM12 6h-3v-5h-2v5h-3l4 6z" />
     </svg>
   </Button>
 
   <Button isRounded={true} mode="primary">
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       class="btn-icon-left"
-      fill="currentColor"
+      viewBox="0 0 16 16"
       stroke-width="0"
-      viewBox="0 0 24 24"
+      stroke="currentColor"
+      fill="currentColor"
       data-custom-icon="true"
       focusable="false"
       aria-hidden="true"
-      height="1em"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg">
+      height="14px"
+      width="14px"
+      version="1.1">
       <path
-        d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
-      0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
-      3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
-    </svg> Call
+        d="M11 10c-1 1-1 2-2 2s-2-1-3-2-2-2-2-3 1-1 2-2-2-4-3-4-3 3-3 3c0 2 2.055 6.055 4 8s6 4 8 4c0 0 3-2 3-3s-3-4-4-3z" />
+    </svg>
+    Call
   </Button>
 </div>
diff --git a/agnosticui-vue/src/stories/ButtonIcon.stories.js b/agnosticui-vue/src/stories/ButtonIcon.stories.js
index ef8e63168..e78d3189a 100644
--- a/agnosticui-vue/src/stories/ButtonIcon.stories.js
+++ b/agnosticui-vue/src/stories/ButtonIcon.stories.js
@@ -18,48 +18,46 @@ Essentially, you can style your slots aka children with css-in-js,
 css modules, or whatever suits you best. We just render it with
 <slot /> so it makes no difference. */
 <Button mode="primary" v-bind:isRounded="true">
-  Call
-  <svg
-    :class="this.$style.iconRight"
-    stroke="currentColor"
-    fill="currentColor"
-    stroke-width="0"
-    viewBox="0 0 24 24"
-    data-custom-icon="true"
-    focusable="false"
-    aria-hidden="true"
-    height="1em"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
-      0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
-      3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
-    />
-  </svg>
+Call
+<svg
+  :class="this.$style.iconRight"
+  stroke="currentColor"
+  fill="currentColor"
+  stroke-width="0"
+  viewBox="0 0 16 16"
+  version="1.1"
+  data-custom-icon="true"
+  focusable="false"
+  aria-hidden="true"
+  height="14px"
+  width="14px"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M11 10c-1 1-1 2-2 2s-2-1-3-2-2-2-2-3 1-1 2-2-2-4-3-4-3 3-3 3c0 2 2.055 6.055 4 8s6 4 8 4c0 0 3-2 3-3s-3-4-4-3z"
+  />
+</svg>
 </Button>
 <Button mode="primary" v-bind:isRounded="true">
-  <svg
-    :class="this.$style.iconLeft"
-    viewBox="0 0 16 16"
-    version="1.1"
-    width="16"
-    height="16"
-    aria-hidden="true"
-  >
-    <path
-      fill="currentColor"
-      fill-rule="evenodd"
-      d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
-      5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
-      1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
-      0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
-      5.06 14.08 4 12 4z"
-    />
-  </svg> Download
-</Button>      
+<svg
+  :class="this.$style.iconLeft"
+  stroke="currentColor"
+  fill="currentColor"
+  viewBox="0 0 16 16"
+  version="1.1"
+  stroke-width="0"
+  viewBox="0 0 16 16"
+  data-custom-icon="true"
+  focusable="false"
+  aria-hidden="true"
+  height="14px"
+  width="14px"
+  xmlns="http://www.w3.org/2000/svg
+>
+  <path d="M14 11v2h-12v-2h-2v4h16v-4zM12 6h-3v-5h-2v5h-3l4 6z"></path>
+</svg>
+Download
+</Button
       `
     }
   }
diff --git a/agnosticui-vue/src/stories/ButtonIconRight.vue b/agnosticui-vue/src/stories/ButtonIconRight.vue
deleted file mode 100644
index 7a70983df..000000000
--- a/agnosticui-vue/src/stories/ButtonIconRight.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <Button mode="primary" v-bind:isRounded="true">
-    Call
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      stroke-width="0"
-      viewBox="0 0 24 24"
-      data-custom-icon="true"
-      focusable="false"
-      aria-hidden="true"
-      height="1em"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-          1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
-          0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
-          3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
-      />
-    </svg>
-  </Button>
-</template>
-
-<script>
-import Button from "./Button.vue";
-export default {
-  name: "button-icon-right",
-  components: {
-    Button,
-  },
-};
-</script>
\ No newline at end of file
diff --git a/agnosticui-vue/src/stories/ButtonIconTests.vue b/agnosticui-vue/src/stories/ButtonIconTests.vue
index 59b971bc9..5f0a581fa 100644
--- a/agnosticui-vue/src/stories/ButtonIconTests.vue
+++ b/agnosticui-vue/src/stories/ButtonIconTests.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: inline-flex;">
+  <div style="display: inline-flex">
     <Button mode="primary" v-bind:isRounded="true">
       Call
       <svg
@@ -7,51 +7,58 @@
         stroke="currentColor"
         fill="currentColor"
         stroke-width="0"
-        viewBox="0 0 24 24"
+        viewBox="0 0 16 16"
         data-custom-icon="true"
         focusable="false"
         aria-hidden="true"
-        height="1em"
-        width="1em"
+        height="14px"
+        width="14px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-          1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
-          0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
-          3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
+          d="M11 10c-1 1-1 2-2 2s-2-1-3-2-2-2-2-3 1-1 2-2-2-4-3-4-3 3-3 3c0 2 2.055 6.055 4 8s6 4 8 4c0 0 3-2 3-3s-3-4-4-3z"
         />
       </svg>
     </Button>
     <Button mode="primary" v-bind:isRounded="true">
       <svg
         :class="this.$style.iconLeft"
+        stroke="currentColor"
+        fill="currentColor"
+        stroke-width="0"
         viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        height="16"
+        data-custom-icon="true"
+        focusable="false"
         aria-hidden="true"
+        height="14px"
+        width="14px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          fill="currentColor"
-          fill-rule="evenodd"
-          d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
-          5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
-          1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
-          0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
-          5.06 14.08 4 12 4z"
-        />
-      </svg> Download
+        <path d="M14 11v2h-12v-2h-2v4h16v-4zM12 6h-3v-5h-2v5h-3l4 6z"></path>
+      </svg>
+      Download
     </Button>
   </div>
 </template>
 
 <style module>
+/* Just for demo only! :) */
+:global(button) {
+  margin-right: 8px;
+}
+
 .iconLeft {
   margin-right: 8px;
+  stroke-width: 0;
+  width: 16px;
+  height: 16px;
 }
+
 .iconRight {
   margin-left: 8px;
+  stroke-width: 0;
+  width: 16px;
+  height: 16px;
 }
 </style>
 <script>
diff --git a/showcase/src/partials/Buttons.vue b/showcase/src/partials/Buttons.vue
index c3e24580b..fd146dfe9 100644
--- a/showcase/src/partials/Buttons.vue
+++ b/showcase/src/partials/Buttons.vue
@@ -226,40 +226,36 @@ the disabled attribute. --&gt;
                 stroke="currentColor"
                 fill="currentColor"
                 stroke-width="0"
-                viewBox="0 0 24 24"
+                viewBox="0 0 16 16"
                 data-custom-icon="true"
                 focusable="false"
                 aria-hidden="true"
-                height="1em"
-                width="1em"
+                height="14px"
+                width="14px"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-            1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
-            0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
-            3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
+                  d="M11 10c-1 1-1 2-2 2s-2-1-3-2-2-2-2-3 1-1 2-2-2-4-3-4-3 3-3 3c0 2 2.055 6.055 4 8s6 4 8 4c0 0 3-2 3-3s-3-4-4-3z"
                 />
               </svg>
             </Button>
             <Button mode="primary" v-bind:isRounded="true">
               <svg
                 :class="this.$style.iconLeft"
+                stroke="currentColor"
+                fill="currentColor"
+                stroke-width="0"
                 viewBox="0 0 16 16"
-                version="1.1"
-                width="16"
-                height="16"
+                data-custom-icon="true"
+                focusable="false"
                 aria-hidden="true"
+                height="14px"
+                width="14px"
+                xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
-            5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
-            1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
-            0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
-            5.06 14.08 4 12 4z"
-                />
+                  d="M14 11v2h-12v-2h-2v4h16v-4zM12 6h-3v-5h-2v5h-3l4 6z"
+                ></path>
               </svg>
               Download
             </Button>
@@ -274,39 +270,35 @@ the disabled attribute. --&gt;
     stroke=&#x22;currentColor&#x22;
     fill=&#x22;currentColor&#x22;
     stroke-width=&#x22;0&#x22;
-    viewBox=&#x22;0 0 24 24&#x22;
+    viewBox=&#x22;0 0 16 16&#x22;
     data-custom-icon=&#x22;true&#x22;
     focusable=&#x22;false&#x22;
     aria-hidden=&#x22;true&#x22;
-    height=&#x22;1em&#x22;
-    width=&#x22;1em&#x22;
+    height=&#x22;14px&#x22;
+    width=&#x22;14px&#x22;
     xmlns=&#x22;http://www.w3.org/2000/svg&#x22;
   &#x3E;
     &#x3C;path
-      d=&#x22;M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1
-      1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2
-      2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z&#x22;
+      d=&#x22;M11 10c-1 1-1 2-2 2s-2-1-3-2-2-2-2-3 1-1 2-2-2-4-3-4-3 3-3
+      3c0 2 2.055 6.055 4 8s6 4 8 4c0 0 3-2 3-3s-3-4-4-3z&#x22;
     /&#x3E;
   &#x3C;/svg&#x3E;
 &#x3C;/button&#x3E;
 &#x3C;button class=&#x22;btn btn-primary btn-rounded&#x22;&#x3E;
-    :class=&#x22;this.$style.iconLeft&#x22;
+  &#x3C;svg
+    stroke=&#x22;currentColor&#x22;
+    fill=&#x22;currentColor&#x22;
+    stroke-width=&#x22;0&#x22;
     viewBox=&#x22;0 0 16 16&#x22;
-    version=&#x22;1.1&#x22;
-    width=&#x22;16&#x22;
-    height=&#x22;16&#x22;
+    data-custom-icon=&#x22;true&#x22;
+    focusable=&#x22;false&#x22;
     aria-hidden=&#x22;true&#x22;
+    height=&#x22;14px&#x22;
+    width=&#x22;14px&#x22;
+    xmlns=&#x22;http://www.w3.org/2000/svg&#x22;
   &#x3E;
     &#x3C;path
-      fill=&#x22;currentColor&#x22;
-      fill-rule=&#x22;evenodd&#x22;
-      d=&#x22;M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1
-      3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7
-      1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7
-      3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2
-      0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06
-      14.08 4 12 4z&#x22;
+      d=&#x22;M14 11v2h-12v-2h-2v4h16v-4zM12 6h-3v-5h-2v5h-3l4 6z&#x22;
     /&#x3E;
   &#x3C;/svg&#x3E; Download
 &#x3C;/button&#x3E;
@@ -493,9 +485,13 @@ export default {
 }
 .iconLeft {
   margin-right: 8px;
+  width: 14px;
+  height: 14px;
 }
 .iconRight {
   margin-left: 8px;
+  width: 14px;
+  height: 14px;
 }
 </style>