Generate inline react components from SVGs during the build

elastic · Nov 22, 2017 · 59e8362 · 59e8362
1 parent e2b2235
commit 59e8362
Show file tree

Hide file tree

Showing 19 changed files with 2,478 additions and 808 deletions.
diff --git a/.babelrc b/.babelrc
@@ -18,6 +18,17 @@
     "transform-async-generator-functions",
     "transform-object-rest-spread",
     // stage 2
-    "transform-class-properties"
+    "transform-class-properties",
+    [
+      "inline-react-svg",
+      {
+        "svgo": {
+          "plugins": [
+            { "cleanupIDs": false },
+            { "removeViewBox": false },
+          ]
+        }
+      }
+    ]
   ]
 }
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "babel-jest": "21.0.0",
     "babel-loader": "7.1.2",
     "babel-plugin-add-module-exports": "0.2.1",
+    "babel-plugin-inline-react-svg": "^0.5.2",
     "babel-plugin-transform-async-generator-functions": "6.24.1",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-object-rest-spread": "6.26.0",

diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap
@@ -24,13 +24,24 @@ exports[`EuiAccordion is rendered 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <svg
+              aria-label="arrow right icon"
               class="euiIcon euiIcon--medium"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xlink="http://www.w3.org/1999/xlink"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <title>
-                arrow right icon
-              </title>
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
               <use
-                href="#arrow_right"
+                fill-rule="nonzero"
+                href="#arrow_right-a"
+                transform="matrix(0 1 1 0 0 0)"
               />
             </svg>
           </div>

diff --git a/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
@@ -26,13 +26,24 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
         class="euiContextMenu__itemLayout"
       >
         <svg
+          aria-label="arrow left icon"
           class="euiIcon euiContextMenu__icon euiIcon--medium"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
         >
-          <title>
-            arrow left icon
-          </title>
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_left-a"
+            />
+          </defs>
           <use
-            xlink:href="#arrow_left"
+            fill-rule="nonzero"
+            transform="rotate(90 8 8)"
+            xlink:href="#arrow_left-a"
           />
         </svg>
         <span
@@ -69,13 +80,24 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
         class="euiContextMenu__itemLayout"
       >
         <svg
+          aria-label="arrow left icon"
           class="euiIcon euiContextMenu__icon euiIcon--medium"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
         >
-          <title>
-            arrow left icon
-          </title>
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_left-a"
+            />
+          </defs>
           <use
-            xlink:href="#arrow_left"
+            fill-rule="nonzero"
+            transform="rotate(90 8 8)"
+            xlink:href="#arrow_left-a"
           />
         </svg>
         <span
@@ -104,13 +126,24 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
         class="euiContextMenu__itemLayout"
       >
         <svg
+          aria-label="arrow left icon"
           class="euiIcon euiContextMenu__icon euiIcon--medium"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
         >
-          <title>
-            arrow left icon
-          </title>
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_left-a"
+            />
+          </defs>
           <use
-            xlink:href="#arrow_left"
+            fill-rule="nonzero"
+            transform="rotate(90 8 8)"
+            xlink:href="#arrow_left-a"
           />
         </svg>
         <span
@@ -134,13 +167,24 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             2a
           </span>
           <svg
+            aria-label="arrow right icon"
             class="euiIcon euiContextMenu__arrow euiIcon--medium"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
           >
-            <title>
-              arrow right icon
-            </title>
+            <defs>
+              <path
+                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                id="arrow_right-a"
+              />
+            </defs>
             <use
-              xlink:href="#arrow_right"
+              fill-rule="nonzero"
+              transform="matrix(0 1 1 0 0 0)"
+              xlink:href="#arrow_right-a"
             />
           </svg>
         </span>
@@ -158,13 +202,24 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             2b
           </span>
           <svg
+            aria-label="arrow right icon"
             class="euiIcon euiContextMenu__arrow euiIcon--medium"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
           >
-            <title>
-              arrow right icon
-            </title>
+            <defs>
+              <path
+                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                id="arrow_right-a"
+              />
+            </defs>
             <use
-              xlink:href="#arrow_right"
+              fill-rule="nonzero"
+              transform="matrix(0 1 1 0 0 0)"
+              xlink:href="#arrow_right-a"
             />
           </svg>
         </span>
@@ -182,13 +237,24 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             2c
           </span>
           <svg
+            aria-label="arrow right icon"
             class="euiIcon euiContextMenu__arrow euiIcon--medium"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
           >
-            <title>
-              arrow right icon
-            </title>
+            <defs>
+              <path
+                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                id="arrow_right-a"
+              />
+            </defs>
             <use
-              xlink:href="#arrow_right"
+              fill-rule="nonzero"
+              transform="matrix(0 1 1 0 0 0)"
+              xlink:href="#arrow_right-a"
             />
           </svg>
         </span>
@@ -215,13 +281,24 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
         class="euiContextMenu__itemLayout"
       >
         <svg
+          aria-label="arrow left icon"
           class="euiIcon euiContextMenu__icon euiIcon--medium"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <title>
-            arrow left icon
-          </title>
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_left-a"
+            />
+          </defs>
           <use
-            href="#arrow_left"
+            fill-rule="nonzero"
+            href="#arrow_left-a"
+            transform="rotate(90 8 8)"
           />
         </svg>
         <span

diff --git a/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_item.test.js.snap
@@ -31,13 +31,24 @@ exports[`EuiContextMenuItem props hasPanel is rendered 1`] = `
       class="euiContextMenuItem__text"
     />
     <svg
+      aria-label="arrow right icon"
       class="euiIcon euiContextMenu__arrow euiIcon--medium"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xlink="http://www.w3.org/1999/xlink"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <title>
-        arrow right icon
-      </title>
+      <defs>
+        <path
+          d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+          id="arrow_right-a"
+        />
+      </defs>
       <use
-        href="#arrow_right"
+        fill-rule="nonzero"
+        href="#arrow_right-a"
+        transform="matrix(0 1 1 0 0 0)"
       />
     </svg>
   </span>

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -27,13 +27,24 @@ exports[`EuiContextMenuPanel props onClose renders a button as a title 1`] = `
       class="euiContextMenu__itemLayout"
     >
       <svg
+        aria-label="arrow left icon"
         class="euiIcon euiContextMenu__icon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <title>
-          arrow left icon
-        </title>
+        <defs>
+          <path
+            d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+            id="arrow_left-a"
+          />
+        </defs>
         <use
-          href="#arrow_left"
+          fill-rule="nonzero"
+          href="#arrow_left-a"
+          transform="rotate(90 8 8)"
         />
       </svg>
       <span

diff --git a/src/components/form/field_password/__snapshots__/field_password.test.js.snap b/src/components/form/field_password/__snapshots__/field_password.test.js.snap
@@ -11,13 +11,23 @@ exports[`EuiFieldPassword is rendered 1`] = `
     type="password"
   />
   <svg
+    aria-label="lock icon"
     class="euiIcon euiFormControlLayout__icon euiIcon--medium"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <title>
-      lock icon
-    </title>
+    <defs>
+      <path
+        d="M3 5a5 5 0 0 1 10 0h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1zm6.33 6.493L10 13H6l.67-1.507a2 2 0 1 1 2.66 0zM2 15h12V6H2v9zM8 1C5.794 1 4 2.794 4 5h8c0-2.206-1.794-4-4-4z"
+        id="lock-a"
+      />
+    </defs>
     <use
-      href="#lock"
+      fill-rule="evenodd"
+      href="#lock-a"
     />
   </svg>
 </div>

diff --git a/src/components/form/field_search/__snapshots__/field_search.test.js.snap b/src/components/form/field_search/__snapshots__/field_search.test.js.snap
@@ -11,13 +11,22 @@ exports[`EuiFieldSearch is rendered 1`] = `
     type="search"
   />
   <svg
+    aria-label="search icon"
     class="euiIcon euiFormControlLayout__icon euiIcon--medium"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <title>
-      search icon
-    </title>
+    <defs>
+      <path
+        d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
+        id="search-a"
+      />
+    </defs>
     <use
-      href="#search"
+      href="#search-a"
     />
   </svg>
 </div>

diff --git a/src/components/form/select/__snapshots__/select.test.js.snap b/src/components/form/select/__snapshots__/select.test.js.snap
@@ -10,13 +10,23 @@ exports[`EuiSelect is rendered 1`] = `
     data-test-subj="test subject string"
   />
   <svg
+    aria-label="arrow down icon"
     class="euiIcon euiFormControlLayout__icon euiFormControlLayout__icon--right euiIcon--medium"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <title>
-      arrow down icon
-    </title>
+    <defs>
+      <path
+        d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+        id="arrow_down-a"
+      />
+    </defs>
     <use
-      href="#arrow_down"
+      fill-rule="nonzero"
+      href="#arrow_down-a"
     />
   </svg>
 </div>