Merge branch 'add-svg-loader' into 'master'

Fixes Tech debt: No need to pass svgs as props into Vue with Webpack

Closes #27692 and #27840

See merge request !9522

app/assets/javascripts/commit/pipelines/pipelines_table.js.es6

@@ -39,15 +39,10 @@ const PipelineStore = require('./pipelines_store');
      */
     data() {
       const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
-      const svgsData = document.querySelector('.pipeline-svgs').dataset;
       const store = new PipelineStore();
 
-      // Transform svgs DOMStringMap to a plain Object.
-      const svgsObject = gl.utils.DOMStringMapToObject(svgsData);
-
       return {
         endpoint: pipelinesTableData.endpoint,
-        svgs: svgsObject,
         store,
         state: store.state,
         isLoading: false,
@@ -101,10 +96,7 @@ const PipelineStore = require('./pipelines_store');
 
         <div class="table-holder pipelines"
           v-if="!isLoading && state.pipelines.length > 0">
-          <pipelines-table-component
-            :pipelines="state.pipelines"
-            :svgs="svgs">
-          </pipelines-table-component>
+          <pipelines-table-component :pipelines="state.pipelines"/>
         </div>
       </div>
     `,

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

 /* eslint-disable no-param-reassign */
-/* global Vue */
+import Vue from 'vue';
+import iconCommit from '../svg/icon_commit.svg';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -9,6 +10,11 @@
       items: Array,
       stage: Object,
     },
+
+    data() {
+      return { iconCommit };
+    },
+
     template: `
       <div>
         <div class="events-description">
@@ -31,7 +37,7 @@
               </h5>
               <span>
                 First
-                <span class="commit-icon">${global.cycleAnalytics.svgs.iconCommit}</span>
+                <span class="commit-icon">${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 Vue */
+import Vue from 'vue';
+import iconBranch from '../svg/icon_branch.svg';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -9,6 +10,9 @@
       items: Array,
       stage: Object,
     },
+    data() {
+      return { iconBranch };
+    },
     template: `
       <div>
         <div class="events-description">
@@ -22,7 +26,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">${global.cycleAnalytics.svgs.iconBranch}</span>
+                <span class="icon-branch">${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

 /* eslint-disable no-param-reassign */
-/* global Vue */
+import Vue from 'vue';
+import iconBuildStatus from '../svg/icon_build_status.svg';
+import iconBranch from '../svg/icon_branch.svg';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -9,6 +11,9 @@
       items: Array,
       stage: Object,
     },
+    data() {
+      return { iconBuildStatus, iconBranch };
+    },
     template: `
       <div>
         <div class="events-description">
@@ -18,13 +23,13 @@
           <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">${global.cycleAnalytics.svgs.iconBuildStatus}</span>
+                <span class="icon-build-status">${iconBuildStatus}</span>
                 <a :href="build.url" class="item-build-name">{{ build.name }}</a>
                 &middot;
                 <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">${global.cycleAnalytics.svgs.iconBranch}</span>
+                <span class="icon-branch">${iconBranch}</span>
                 <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
               </h5>
               <span>

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

@@ -4,9 +4,6 @@
 
 window.Vue = require('vue');
 window.Cookies = require('js-cookie');
-require('./svg/icon_branch');
-require('./svg/icon_build_status');
-require('./svg/icon_commit');
 require('./components/stage_code_component');
 require('./components/stage_issue_component');
 require('./components/stage_plan_component');

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_branch.svg

+<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>

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_build_status.svg

+<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>

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 = {}));

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

+<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>

app/assets/javascripts/environments/components/environment.js.es6

@@ -35,9 +35,6 @@ module.exports = Vue.component('environment-component', {
       projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
       newEnvironmentPath: environmentsData.newEnvironmentPath,
       helpPagePath: environmentsData.helpPagePath,
-      commitIconSvg: environmentsData.commitIconSvg,
-      playIconSvg: environmentsData.playIconSvg,
-      terminalIconSvg: environmentsData.terminalIconSvg,
 
       // Pagination Properties,
       paginationInformation: {},
@@ -176,11 +173,7 @@ module.exports = Vue.component('environment-component', {
           <environment-table
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"
-            :play-icon-svg="playIconSvg"
-            :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg">
-          </environment-table>
+            :can-read-environment="canReadEnvironmentParsed"/>
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"

app/assets/javascripts/environments/components/environment_actions.js.es6

 const Vue = require('vue');
+const playIconSvg = require('icons/_icon_play.svg');
 
 module.exports = Vue.component('actions-component', {
   props: {
@@ -7,11 +8,10 @@ module.exports = Vue.component('actions-component', {
       required: false,
       default: () => [],
     },
-
-    playIconSvg: {
-      type: String,
-      required: false,
   },
+
+  data() {
+    return { playIconSvg };
   },
 
   template: `
@@ -28,9 +28,7 @@ module.exports = Vue.component('actions-component', {
             data-method="post"
             rel="nofollow"
             class="js-manual-action-link">
-
-            <span class="js-action-play-icon-container" v-html="playIconSvg"></span>
-
+            ${playIconSvg}
             <span>
               {{action.name}}
             </span>

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -46,21 +46,6 @@ module.exports = Vue.component('environment-item', {
       required: false,
       default: false,
     },
-
-    commitIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    playIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    terminalIconSvg: {
-      type: String,
-      required: false,
-    },
   },
 
   computed: {
@@ -487,9 +472,7 @@ module.exports = Vue.component('environment-item', {
             :commit-url="commitUrl"
             :short-sha="commitShortSha"
             :title="commitTitle"
-            :author="commitAuthor"
-            :commit-icon-svg="commitIconSvg">
-          </commit-component>
+            :author="commitAuthor"/>
         </div>
         <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
           No deployments yet
@@ -506,27 +489,20 @@ module.exports = Vue.component('environment-item', {
       <td class="environments-actions">
         <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
           <actions-component v-if="hasManualActions && canCreateDeployment"
-            :play-icon-svg="playIconSvg"
-            :actions="manualActions">
-          </actions-component>
+            :actions="manualActions"/>
 
           <external-url-component v-if="externalURL && canReadEnvironment"
-            :external-url="externalURL">
-          </external-url-component>
+            :external-url="externalURL"/>
 
           <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path">
-          </stop-component>
+            :stop-url="model.stop_path"/>
 
           <terminal-button-component v-if="model && model.terminal_path"
-            :terminal-icon-svg="terminalIconSvg"
-            :terminal-path="model.terminal_path">
-          </terminal-button-component>
+            :terminal-path="model.terminal_path"/>
 
           <rollback-component v-if="canRetry && canCreateDeployment"
             :is-last-deployment="isLastDeployment"
-            :retry-url="retryUrl">
-            </rollback-component>
+            :retry-url="retryUrl"/>
         </div>
       </td>
     </tr>

app/assets/javascripts/environments/components/environment_terminal_button.js.es6

@@ -3,6 +3,7 @@
  * Used in environments table.
  */
 const Vue = require('vue');
+const terminalIconSvg = require('icons/_icon_terminal.svg');
 
 module.exports = Vue.component('terminal-button-component', {
   props: {
@@ -10,16 +11,16 @@ module.exports = Vue.component('terminal-button-component', {
       type: String,
       default: '',
     },
-    terminalIconSvg: {
-      type: String,
-      default: '',
   },
+
+  data() {
+    return { terminalIconSvg };
   },
 
   template: `
     <a class="btn terminal-button"
       :href="terminalPath">
-      <span class="js-terminal-icon-container" v-html="terminalIconSvg"></span>
+      ${terminalIconSvg}
     </a>
   `,
 });

app/assets/javascripts/environments/components/environments_table.js.es6

@@ -28,21 +28,6 @@ module.exports = Vue.component('environment-table-component', {
       required: false,
       default: false,
     },
-
-    commitIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    playIconSvg: {
-      type: String,
-      required: false,
-    },
-
-    terminalIconSvg: {
-      type: String,
-      required: false,
-    },
   },
 
   template: `
@@ -63,10 +48,7 @@ module.exports = Vue.component('environment-table-component', {
           <tr is="environment-item"
             :model="model"
             :can-create-deployment="canCreateDeployment"
-            :can-read-environment="canReadEnvironment"
-            :play-icon-svg="playIconSvg"
-            :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg"></tr>
+            :can-read-environment="canReadEnvironment"></tr>
         </template>
       </tbody>
     </table>

app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6

 /* global Vue */
+import stopwatchSvg from 'icons/_icon_stopwatch.svg';
+
 require('../../../lib/utils/pretty_time');
 
 (() => {
@@ -11,7 +13,6 @@ require('../../../lib/utils/pretty_time');
       'showNoTimeTrackingState',
       'timeSpentHumanReadable',
       'timeEstimateHumanReadable',
-      'stopwatchSvg',
     ],
     methods: {
       abbreviateTime(timeStr) {
@@ -20,7 +21,7 @@ require('../../../lib/utils/pretty_time');
     },
     template: `
       <div class='sidebar-collapsed-icon'>
-        <div v-html='stopwatchSvg'></div>
+        ${stopwatchSvg}
         <div class='time-tracking-collapsed-summary'>
           <div class='compare' v-if='showComparisonState'>
             <span>{{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>

app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6

@@ -15,7 +15,6 @@ require('./comparison_pane');
       'time_spent',
       'human_time_estimate',
       'human_time_spent',
-      'stopwatchSvg',
       'docsUrl',
     ],
     data() {
@@ -71,8 +70,7 @@ require('./comparison_pane');
           :show-spent-only-state='showSpentOnlyState'
           :show-estimate-only-state='showEstimateOnlyState'
           :time-spent-human-readable='timeSpentHumanReadable'
-          :time-estimate-human-readable='timeEstimateHumanReadable'
-          :stopwatch-svg='stopwatchSvg'>
+          :time-estimate-human-readable='timeEstimateHumanReadable'>
         </time-tracking-collapsed-state>
         <div class='title hide-collapsed'>
           Time tracking

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -246,17 +246,6 @@
       previousPage: parseInt(paginationInformation['X-PREV-PAGE'], 10),
     });
 
-    /**
-     * Transforms a DOMStringMap into a plain object.
-     *
-     * @param {DOMStringMap} DOMStringMapObject
-     * @returns {Object}
-     */
-    w.gl.utils.DOMStringMapToObject = DOMStringMapObject => Object.keys(DOMStringMapObject).reduce((acc, element) => {
-      acc[element] = DOMStringMapObject[element];
-      return acc;
-    }, {});
-
     /**
      * Updates the search parameter of a URL given the parameter and values provided.
      *

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

@@ -11,15 +11,10 @@ $(() => new Vue({
 
   data() {
     const project = document.querySelector('.pipelines');
-    const svgs = document.querySelector('.pipeline-svgs').dataset;
-
-    // Transform svgs DOMStringMap to a plain Object.
-    const svgsObject = gl.utils.DOMStringMapToObject(svgs);
 
     return {
       scope: project.dataset.url,
       store: new gl.PipelineStore(),
-      svgs: svgsObject,
     };
   },
   components: {
@@ -27,10 +22,8 @@ $(() => new Vue({
   },
   template: `
     <vue-pipelines
-      :scope='scope'
-      :store='store'
-      :svgs='svgs'
-    >
+      :scope="scope"
+      :store="store">
     </vue-pipelines>
   `,
 }));

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

 /* global Vue, Flash, gl */
 /* eslint-disable no-param-reassign,  no-alert */
+const playIconSvg = require('icons/_icon_play.svg');
 
 ((gl) => {
   gl.VuePipelineActions = Vue.extend({
-    props: ['pipeline', 'svgs'],
+    props: ['pipeline'],
     computed: {
       actions() {
         return this.pipeline.details.manual_actions.length > 0;
@@ -31,6 +32,11 @@
         }
       },
     },
+
+    data() {
+      return { playIconSvg };
+    },
+
     template: `
       <td class="pipeline-actions">
         <div class="pull-right">
@@ -42,7 +48,7 @@
                 title="Manual job"
                 data-placement="top"
                 aria-label="Manual job">
-                <span v-html="svgs.iconPlay" aria-hidden="true"></span>
+                <span v-html="playIconSvg" aria-hidden="true"></span>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
               </button>
               <ul class="dropdown-menu dropdown-menu-align-right">
@@ -50,8 +56,8 @@
                   <a
                     rel="nofollow"
                     data-method="post"
-                    :href="action.path">
-                    <span v-html="svgs.iconPlay" aria-hidden="true"></span>
+                    :href="action.path" >
+                    <span v-html="playIconSvg" aria-hidden="true"></span>
                     <span>{{action.name}}</span>
                   </a>
                 </li>

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

@@ -27,7 +27,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         pageRequest: false,
       };
     },
-    props: ['scope', 'store', 'svgs'],
+    props: ['scope', 'store'],
     created() {
       const pagenum = gl.utils.getParameterByName('page');
       const scope = gl.utils.getParameterByName('scope');
@@ -70,10 +70,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         </div>
 
         <div class="table-holder" v-if='!pageRequest && pipelines.length'>
-          <pipelines-table-component
-            :pipelines='pipelines'
-            :svgs='svgs'>
-          </pipelines-table-component>
+          <pipelines-table-component :pipelines='pipelines'/>
         </div>
 
         <gl-pagination

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

 /* global Vue, Flash, gl */
 /* eslint-disable no-param-reassign */
+import canceledSvg from 'icons/_icon_status_canceled_borderless.svg';
+import createdSvg from 'icons/_icon_status_created_borderless.svg';
+import failedSvg from 'icons/_icon_status_failed_borderless.svg';
+import manualSvg from 'icons/_icon_status_manual_borderless.svg';
+import pendingSvg from 'icons/_icon_status_pending_borderless.svg';
+import runningSvg from 'icons/_icon_status_running_borderless.svg';
+import skippedSvg from 'icons/_icon_status_skipped_borderless.svg';
+import successSvg from 'icons/_icon_status_success_borderless.svg';
+import warningSvg from 'icons/_icon_status_warning_borderless.svg';
 
 ((gl) => {
   gl.VueStage = Vue.extend({
     data() {
+      const svgsDictionary = {
+        icon_status_canceled: canceledSvg,
+        icon_status_created: createdSvg,
+        icon_status_failed: failedSvg,
+        icon_status_manual: manualSvg,
+        icon_status_pending: pendingSvg,
+        icon_status_running: runningSvg,
+        icon_status_skipped: skippedSvg,
+        icon_status_success: successSvg,
+        icon_status_warning: warningSvg,
+      };
+
       return {
         builds: '',
         spinner: '<span class="fa fa-spinner fa-spin"></span>',
+        svg: svgsDictionary[this.stage.status.icon],
       };
     },
+
     props: {
       stage: {
         type: Object,
         required: true,
       },
-      svgs: {
-        type: Object,
-        required: true,
-      },
-      match: {
-        type: Function,
-        required: true,
-      },
     },
 
     updated() {
@@ -73,11 +88,6 @@
       tooltip() {
         return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
       },
-      svg() {
-        const { icon } = this.stage.status;
-        const stageIcon = icon.replace(/icon/i, 'stage_icon');
-        return this.svgs[this.match(stageIcon)];
-      },
       triggerButtonClass() {
         return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
       },
@@ -91,8 +101,7 @@
           data-placement="top"
           data-toggle="dropdown"
           type="button"
-          :aria-label="stage.title"
-        >
+          :aria-label="stage.title">
           <span v-html="svg" aria-hidden="true"></span>
           <i class="fa fa-caret-down" aria-hidden="true"></i>
         </button>
@@ -101,8 +110,7 @@
           <div
             :class="dropdownClass"
             class="js-builds-dropdown-list scrollable-menu"
-            v-html="buildsOrSpinner"
-          >
+            v-html="buildsOrSpinner">
           </div>
         </ul>
       </div>

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

 /* global Vue, gl */
 /* eslint-disable no-param-reassign */
 
+import canceledSvg from 'icons/_icon_status_canceled.svg';
+import createdSvg from 'icons/_icon_status_created.svg';
+import failedSvg from 'icons/_icon_status_failed.svg';
+import manualSvg from 'icons/_icon_status_manual.svg';
+import pendingSvg from 'icons/_icon_status_pending.svg';
+import runningSvg from 'icons/_icon_status_running.svg';
+import skippedSvg from 'icons/_icon_status_skipped.svg';
+import successSvg from 'icons/_icon_status_success.svg';
+import warningSvg from 'icons/_icon_status_warning.svg';
+
 ((gl) => {
   gl.VueStatusScope = Vue.extend({
     props: [
-      'pipeline', 'svgs', 'match',
+      'pipeline',
     ],
+
+    data() {
+      const svgsDictionary = {
+        icon_status_canceled: canceledSvg,
+        icon_status_created: createdSvg,
+        icon_status_failed: failedSvg,
+        icon_status_manual: manualSvg,
+        icon_status_pending: pendingSvg,
+        icon_status_running: runningSvg,
+        icon_status_skipped: skippedSvg,
+        icon_status_success: successSvg,
+        icon_status_warning: warningSvg,
+      };
+
+      return {
+        svg: svgsDictionary[this.pipeline.details.status.icon],
+      };
+    },
+
     computed: {
       cssClasses() {
         const cssObject = { 'ci-status': true };
         cssObject[`ci-${this.pipeline.details.status.group}`] = true;
         return cssObject;
       },
-      svg() {
-        return this.svgs[this.match(this.pipeline.details.status.icon)];
-      },
+
       detailsPath() {
         const { status } = this.pipeline.details;
         return status.has_details ? status.details_path : false;
       },
+
+      content() {
+        return `${this.svg} ${this.pipeline.details.status.text}`;
+      },
     },
     template: `
       <td class="commit-link">
         <a
-          :class='cssClasses'
-          :href='detailsPath'
-          v-html='svg + pipeline.details.status.text'
-        >
+          :class="cssClasses"
+          :href="detailsPath"
+          v-html="content">
         </a>
       </td>
     `,

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

@@ -4,14 +4,17 @@
 window.Vue = require('vue');
 require('../lib/utils/datetime_utility');
 
+const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg');
+
 ((gl) => {
   gl.VueTimeAgo = Vue.extend({
     data() {
       return {
         currentTime: new Date(),
+        iconTimerSvg,
       };
     },
-    props: ['pipeline', 'svgs'],
+    props: ['pipeline'],
     computed: {
       timeAgo() {
         return gl.utils.getTimeago();
@@ -56,7 +59,7 @@ require('../lib/utils/datetime_utility');
     template: `
       <td class="pipelines-time-ago">
         <p class="duration" v-if='duration'>
-          <span v-html='svgs.iconTimer'></span>
+          <span v-html="iconTimerSvg"></span>
           {{duration}}
         </p>
         <p class="finished-at" v-if='timeStopped'>

app/assets/javascripts/vue_shared/components/commit.js.es6

 /* global Vue */
 window.Vue = require('vue');
+const commitIconSvg = require('icons/_icon_commit.svg');
 
 (() => {
   window.gl = window.gl || {};
@@ -69,11 +70,6 @@ window.Vue = require('vue');
         required: false,
         default: () => ({}),
       },
-
-      commitIconSvg: {
-        type: String,
-        required: false,
-      },
     },
 
     computed: {
@@ -116,6 +112,10 @@ window.Vue = require('vue');
       },
     },
 
+    data() {
+      return { commitIconSvg };
+    },
+
     template: `
       <div class="branch-commit">
 

app/assets/javascripts/vue_shared/components/pipelines_table.js.es6

@@ -21,14 +21,6 @@ require('./pipelines_table_row');
         default: () => ([]),
       },
 
-      /**
-       * TODO: Remove this when we have webpack.
-       */
-      svgs: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
     },
 
     components: {
@@ -51,8 +43,7 @@ require('./pipelines_table_row');
           <template v-for="model in pipelines"
             v-bind:model="model">
             <tr is="pipelines-table-row-component"
-              :pipeline="model"
-              :svgs="svgs"></tr>
+              :pipeline="model"></tr>
           </template>
         </tbody>
       </table>

app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6

@@ -25,14 +25,6 @@ require('./commit');
         default: () => ({}),
       },
 
-      /**
-       * TODO: Remove this when we have webpack;
-       */
-      svgs: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
     },
 
     components: {
@@ -174,30 +166,9 @@ require('./commit');
       },
     },
 
-    methods: {
-      /**
-       * FIXME: This should not be in this component but in the components that
-       * need this function.
-       *
-       * Used to render SVGs in the following components:
-       * - status-scope
-       * - dropdown-stage
-       *
-       * @param  {String} string
-       * @return {String}
-       */
-      match(string) {
-        return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
-      },
-    },
-
     template: `
       <tr class="commit">
-        <status-scope
-          :pipeline="pipeline"
-          :svgs="svgs"
-          :match="match">
-        </status-scope>
+        <status-scope :pipeline="pipeline"/>
 
         <pipeline-url :pipeline="pipeline"></pipeline-url>
 
@@ -208,26 +179,20 @@ require('./commit');
             :commit-url="commitUrl"
             :short-sha="commitShortSha"
             :title="commitTitle"
-            :author="commitAuthor"
-            :commit-icon-svg="svgs.commitIconSvg">
-          </commit-component>
+            :author="commitAuthor"/>
         </td>
 
         <td class="stage-cell">
           <div class="stage-container dropdown js-mini-pipeline-graph"
             v-if="pipeline.details.stages.length > 0"
             v-for="stage in pipeline.details.stages">
-            <dropdown-stage
-              :stage="stage"
-              :svgs="svgs"
-              :match="match">
-            </dropdown-stage>
+            <dropdown-stage :stage="stage"/>
           </div>
         </td>
 
-        <time-ago :pipeline="pipeline" :svgs="svgs"></time-ago>
+        <time-ago :pipeline="pipeline"/>
 
-        <pipeline-actions :pipeline="pipeline" :svgs="svgs"></pipeline-actions>
+        <pipeline-actions :pipeline="pipeline" />
       </tr>
     `,
   });

app/assets/javascripts/vue_shared/components/table_pagination.js.es6

@@ -19,7 +19,6 @@ window.Vue = require('vue');
 
       /**
         This function will take the information given by the pagination component
-        And make a new Turbolinks call
 
         Here is an example `change` method:
 

app/views/projects/commit/_pipelines_list.haml

@@ -2,27 +2,6 @@
 #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
   endpoint: endpoint,
 } }
-.pipeline-svgs{ data: { "commit_icon_svg" => custom_icon("icon_commit"),
-  "icon_status_canceled" => custom_icon("icon_status_canceled"),
-  "icon_status_running" => custom_icon("icon_status_running"),
-  "icon_status_skipped" => custom_icon("icon_status_skipped"),
-  "icon_status_created" => custom_icon("icon_status_created"),
-  "icon_status_pending" => custom_icon("icon_status_pending"),
-  "icon_status_success" => custom_icon("icon_status_success"),
-  "icon_status_failed" => custom_icon("icon_status_failed"),
-  "icon_status_warning" => custom_icon("icon_status_warning"),
-  "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
-  "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
-  "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
-  "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
-  "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
-  "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
-  "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
-  "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
-  "icon_play" => custom_icon("icon_play"),
-  "icon_timer" => custom_icon("icon_timer"),
-  "icon_status_manual" => custom_icon("icon_status_manual"),
-} }
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('commit_pipelines')

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

@@ -13,7 +13,4 @@
   "project-stopped-environments-path" => project_environments_path(@project, scope: :stopped),
   "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project),
   "help-page-path" => help_page_path("ci/environments"),
-  "css-class" => container_class,
-  "commit-icon-svg" => custom_icon("icon_commit"),
-  "terminal-icon-svg" => custom_icon("icon_terminal"),
-  "play-icon-svg" => custom_icon("icon_play") } }
+  "css-class" => container_class } }

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

@@ -48,28 +48,6 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
   .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
-    .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"),
-      "icon_status_canceled" => custom_icon("icon_status_canceled"),
-      "icon_status_running" => custom_icon("icon_status_running"),
-      "icon_status_skipped" => custom_icon("icon_status_skipped"),
-      "icon_status_created" => custom_icon("icon_status_created"),
-      "icon_status_pending" => custom_icon("icon_status_pending"),
-      "icon_status_success" => custom_icon("icon_status_success"),
-      "icon_status_failed" => custom_icon("icon_status_failed"),
-      "icon_status_warning" => custom_icon("icon_status_warning"),
-      "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
-      "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
-      "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
-      "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
-      "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
-      "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
-      "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
-      "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
-      "icon_play" => custom_icon("icon_play"),
-      "icon_timer" => custom_icon("icon_timer"),
-      "icon_status_manual" => custom_icon("icon_status_manual"),
-    } }
-
     .vue-pipelines-index
 
 = page_specific_javascript_bundle_tag('vue_pipelines')

app/views/shared/issuable/_sidebar.html.haml

@@ -77,7 +77,7 @@
           = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
       - if issuable.has_attribute?(:time_estimate)
         #issuable-time-tracker.block
-          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'stopwatch-svg' => custom_icon('icon_stopwatch'), 'docs-url' => help_page_path('workflow/time_tracking.md') }
+          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'docs-url' => help_page_path('workflow/time_tracking.md') }
             // Fallback while content is loading
             .title.hide-collapsed
               Time tracking

config/webpack.config.js

@@ -64,6 +64,10 @@ var config = {
             'stage-2'
           ]
         }
+      },
+      {
+        test: /\.svg$/,
+        use: 'raw-loader'
       }
     ]
   },
@@ -87,6 +91,7 @@ var config = {
       '~':              path.join(ROOT_PATH, 'app/assets/javascripts'),
       'bootstrap/js':   'bootstrap-sass/assets/javascripts/bootstrap',
       'emoji-aliases$': path.join(ROOT_PATH, 'fixtures/emojis/aliases.json'),
+      'icons':          path.join(ROOT_PATH, 'app/views/shared/icons'),
       'vendor':         path.join(ROOT_PATH, 'vendor/assets/javascripts'),
       'vue$':           'vue/dist/vue.common.js',
     }

package.json

@@ -25,6 +25,7 @@
     "js-cookie": "^2.1.3",
     "mousetrap": "^1.4.6",
     "pikaday": "^1.5.1",
+    "raw-loader": "^0.5.1",
     "select2": "3.5.2-browserify",
     "stats-webpack-plugin": "^0.4.3",
     "timeago.js": "^2.0.5",

spec/javascripts/environments/environment_actions_spec.js.es6

@@ -23,7 +23,6 @@ describe('Actions Component', () => {
       el: document.querySelector('.test-dom-element'),
       propsData: {
         actions: actionsMock,
-        playIconSvg: '<svg></svg>',
       },
     });
 
@@ -34,33 +33,4 @@ describe('Actions Component', () => {
       component.$el.querySelector('.dropdown-menu li a').getAttribute('href'),
     ).toEqual(actionsMock[0].play_path);
   });
-
-  it('should render a dropdown with the provided svg', () => {
-    const actionsMock = [
-      {
-        name: 'bar',
-        play_path: 'https://gitlab.com/play',
-      },
-      {
-        name: 'foo',
-        play_path: '#',
-      },
-    ];
-
-    const component = new ActionsComponent({
-      el: document.querySelector('.test-dom-element'),
-      propsData: {
-        actions: actionsMock,
-        playIconSvg: '<svg></svg>',
-      },
-    });
-
-    expect(
-      component.$el.querySelector('.js-dropdown-play-icon-container').children,
-    ).toContain('svg');
-
-    expect(
-      component.$el.querySelector('.js-action-play-icon-container').children,
-    ).toContain('svg');
-  });
 });

yarn.lock

@@ -3562,6 +3562,10 @@ raw-body@~2.2.0:
     iconv-lite "0.4.15"
     unpipe "1.0.0"
 
+raw-loader@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+
 rc@~1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"