Move SVGs to JS objects for easy reuse

app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6

@@ -23,11 +23,7 @@
               </h5>
               <span>
                 First
-                <span class="commit-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 40 40">
-                    <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/>
-                  </svg>
-                </span>
+                <span class="commit-icon">${global.cycleAnalytics.svgs.iconCommit}</span>
                 <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
                 pushed by
                 <a :href="commit.author.webUrl" class="commit-author-link">

app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6

 /* eslint-disable no-param-reassign */
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
-
+  debugger;
   global.cycleAnalytics.StageStagingComponent = Vue.extend({
     props: {
       items: Array,
@@ -20,11 +20,7 @@
                 <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
                 <i class="fa fa-code-fork"></i>
                 <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
-                <span class="icon-branch">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
-                    <path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/>
-                  </svg>
-                </span>
+                <span class="icon-branch">${global.cycleAnalytics.svgs.iconBranch}</span>
                 <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
               </h5>
               <span>

app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6

@@ -16,14 +16,7 @@
           <li v-for="build in items" class="stage-event-item item-build-component">
             <div class="item-details">
               <h5 class="item-title">
-                <span class="icon-build-status">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
-                    <g fill="#31AF64" fill-rule="evenodd">
-                      <path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/>
-                      <path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.112.113-.113.303.004.42l1.91 1.91c.19.19.51.197.703.004l.265-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/>
-                    </g>
-                  </svg>
-                </span>
+                <span class="icon-build-status">${global.cycleAnalytics.svgs.iconBuildStatus}</span>
                 <a :href="build.url" class="item-build-name">{{ build.name }}</a>
                 &middot;
                 <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6

 //= require vue
+//= require_tree ./svg
 //= require_tree .
 
 $(() => {

app/assets/javascripts/cycle_analytics/svg/icon_branch.js.es6

+/* eslint-disable no-param-reassign */
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+  global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {};
+
+  global.cycleAnalytics.svgs.iconBranch = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/></svg>`;
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/svg/icon_build_status.js.es6

+/* eslint-disable no-param-reassign */
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+  global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {};
+
+  global.cycleAnalytics.svgs.iconBuildStatus = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="#31AF64" fill-rule="evenodd"><path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/><path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.11.113-.11.303.007.42l1.91 1.91c.19.19.51.197.703.004l.264-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/></g></svg>`;
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/svg/icon_commit.js.es6

+/* eslint-disable no-param-reassign */
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+  global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {};
+
+  global.cycleAnalytics.svgs.iconCommit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="#8F8F8F" fill-rule="evenodd" d="M28.777 18c-.91-4.008-4.494-7-8.777-7-4.283 0-7.868 2.992-8.777 7H4.01C2.9 18 2 18.895 2 20c0 1.112.9 2 2.01 2h7.213c.91 4.008 4.494 7 8.777 7 4.283 0 7.868-2.992 8.777-7h7.214C37.1 22 38 21.105 38 20c0-1.112-.9-2-2.01-2h-7.213zM20 25c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z"/></svg>`;
+})(window.gl || (window.gl = {}));