all svgs from index haml

app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6

@@ -3,9 +3,7 @@
 ((gl) => {
   gl.VuePipelineActions = Vue.extend({
-    props: [
-      'pipeline',
-    ],
+    props: ['pipeline', 'svgs'],
     computed: {
       actions() {
         return this.pipeline.details.manual_actions.length > 0;
@@ -31,13 +29,7 @@
                 title="Manual build"
                 alt="Manual Build"
               >
-                <svg title="Manual build" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11" class="icon-play">
-                  <path
-                    fill-rule="evenodd"
-                    d="m9.283 6.47l-7.564 4.254c-.949.534-1.719.266-1.719-.576v-9.292c0-.852.756-1.117 1.719-.576l7.564 4.254c.949.534.963 1.392 0 1.934"
-                  >
-                  </path>
-                </svg>
+                <span v-html='svgs.iconPlay'></span>
                 <i class="fa fa-caret-down"></i>
               </a>
               <ul class="dropdown-menu dropdown-menu-align-right">
@@ -48,13 +40,7 @@
                     :href='action.url'
                     title="Manual build"
                   >
-                    <svg title="Manual build" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11" class="icon-play">
-                      <path
-                        fill-rule="evenodd"
-                        d="m9.283 6.47l-7.564 4.254c-.949.534-1.719.266-1.719-.576v-9.292c0-.852.756-1.117 1.719-.576l7.564 4.254c.949.534.963 1.392 0 1.934"
-                      >
-                      </path>
-                    </svg>
+                    <span v-html='svgs.iconPlay'></span>
                     <span title="Manual build">{{action.name}}</span>
                   </a>
                 </li>

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -102,8 +102,8 @@
                   :match='match'
                 >
                 </stages>
-                <time-ago :pipeline='pipeline'></time-ago>
-                <pipeline-actions :pipeline='pipeline'></pipeline-actions>
+                <time-ago :pipeline='pipeline' :svgs='svgs'></time-ago>
+                <pipeline-actions :pipeline='pipeline' :svgs='svgs'></pipeline-actions>
               </tr>
             </tbody>
           </table>

app/assets/javascripts/vue_pipelines_index/time_ago.js.es6

@@ -7,9 +7,7 @@
         currentTime: new Date(),
       };
     },
-    props: [
-      'pipeline',
-    ],
+    props: ['pipeline', 'svgs'],
     computed: {
       timeAgo() {
         return gl.utils.getTimeago();
@@ -45,16 +43,7 @@
     template: `
       <td>
         <p class="duration" v-if='duration()'>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="40"
-            height="40"
-            viewBox="0 0 40 40"
-          >
-            <g fill="#8F8F8F" fill-rule="evenodd">
-              <path d="M29.513 10.134A15.922 15.922 0 0 0 23 7.28V6h2.993C26.55 6 27 5.552 27 5V2a1 1 0 0 0-1.007-1H14.007C13.45 1 13 1.448 13 2v3a1 1 0 0 0 1.007 1H17v1.28C9.597 8.686 4 15.19 4 23c0 8.837 7.163 16 16 16s16-7.163 16-16c0-3.461-1.099-6.665-2.967-9.283l1.327-1.58a2.498 2.498 0 0 0-.303-3.53 2.499 2.499 0 0 0-3.528.315l-1.016 1.212zM20 34c6.075 0 11-4.925 11-11s-4.925-11-11-11S9 16.925 9 23s4.925 11 11 11z"></path><path d="M19 21h-4.002c-.552 0-.998.452-.998 1.01v1.98c0 .567.447 1.01.998 1.01h7.004c.274 0 .521-.111.701-.291a.979.979 0 0 0 .297-.704v-8.01c0-.54-.452-.995-1.01-.995h-1.98a.997.997 0 0 0-1.01.995V21z"></path>
-            </g>
-          </svg>
+          <span v-html='svgs.iconTimer'></span>
           {{duration()}}
         </p>
         <p class="finished-at" v-if='timeStopped'>

app/views/projects/pipelines/index.html.haml

@@ -49,6 +49,8 @@
         "icon_status_success" => custom_icon("icon_status_success"),
         "icon_status_failed" => custom_icon("icon_status_failed"),
         "icon_status_warning" => custom_icon("icon_status_warning"),
+        "icon_play" => custom_icon("icon_play"),
+        "icon_timer" => custom_icon("icon_timer"),
       } }
       .vue-pipelines-index