Merge branch 'ee-icons-ci-icons' into 'master'

Applyed Patch for CI/CD Icons

See merge request gitlab-org/gitlab-ee!3255

app/assets/javascripts/droplab/utils.js

@@ -30,7 +30,7 @@ const utils = {
   },
 
   isDropDownParts(target) {
-    if (!target || target.tagName === 'HTML') return false;
+    if (!target || !target.hasAttribute || target.tagName === 'HTML') return false;
     return target.hasAttribute(DATA_TRIGGER) || target.hasAttribute(DATA_DROPDOWN);
   },
 };

app/assets/javascripts/pipelines/components/graph/action_component.vue

 <script>
-  import getActionIcon from '../../../vue_shared/ci_action_icons';
   import tooltip from '../../../vue_shared/directives/tooltip';
+  import icon from '../../../vue_shared/components/icon.vue';
 
   /**
    * Renders either a cancel, retry or play icon pointing to the given path.
@@ -29,17 +29,18 @@
       },
     },
 
+    components: {
+      icon,
+    },
+
     directives: {
       tooltip,
     },
 
     computed: {
-      actionIconSvg() {
-        return getActionIcon(this.actionIcon);
-      },
-
       cssClass() {
-        return `js-${gl.text.dasherize(this.actionIcon)}`;
+        const actionIconDash = gl.text.dasherize(this.actionIcon);
+        return `${actionIconDash} js-icon-${actionIconDash}`;
       },
     },
   };
@@ -50,14 +51,9 @@
     :data-method="actionMethod"
     :title="tooltipText"
     :href="link"
-    class="ci-action-icon-container"
+    class="ci-action-icon-container ci-action-icon-wrapper"
+    :class="cssClass"
     data-container="body">
-
-    <i
-      class="ci-action-icon-wrapper"
-      :class="cssClass"
-      v-html="actionIconSvg"
-      aria-hidden="true"
-      />
+    <icon :name="actionIcon"/>
   </a>
 </template>

app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue

 <script>
-  import getActionIcon from '../../../vue_shared/ci_action_icons';
+  import icon from '../../../vue_shared/components/icon.vue';
   import tooltip from '../../../vue_shared/directives/tooltip';
 
   /**
@@ -29,14 +29,12 @@
       },
     },
 
-    directives: {
-      tooltip,
+    components: {
+      icon,
     },
 
-    computed: {
-      actionIconSvg() {
-        return getActionIcon(this.actionIcon);
-      },
+    directives: {
+      tooltip,
     },
   };
 </script>
@@ -49,7 +47,7 @@
     rel="nofollow"
     class="ci-action-icon-wrapper js-ci-status-icon"
     data-container="body"
-    v-html="actionIconSvg"
     aria-label="Job's action">
+    <icon :name="actionIcon"/>
   </a>
 </template>

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue

@@ -18,7 +18,7 @@
    *     "group": "success",
    *     "details_path": "/root/ci-mock/builds/4256",
    *     "action": {
-   *       "icon": "icon_action_retry",
+   *       "icon": "retry",
    *       "title": "Retry",
    *       "path": "/root/ci-mock/builds/4256/retry",
    *       "method": "post"

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -19,7 +19,7 @@
    *     "group": "success",
    *     "details_path": "/root/ci-mock/builds/4256",
    *     "action": {
-   *       "icon": "icon_action_retry",
+   *       "icon": "retry",
    *       "title": "Retry",
    *       "path": "/root/ci-mock/builds/4256/retry",
    *       "method": "post"

app/assets/javascripts/pipelines/components/stage.vue

@@ -14,7 +14,7 @@
  */
 
 import Flash from '../../flash';
-import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
+import icon from '../../vue_shared/components/icon.vue';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 
@@ -45,6 +45,7 @@ export default {
 
   components: {
     loadingIcon,
+    icon,
   },
 
   updated() {
@@ -122,8 +123,8 @@ export default {
       return `ci-status-icon-${this.stage.status.group}`;
     },
 
-    svgIcon() {
-      return borderlessStatusIconEntityMap[this.stage.status.icon];
+    borderlessIcon() {
+      return `${this.stage.status.icon}_borderless`;
     },
   },
 };
@@ -145,9 +146,10 @@ export default {
       aria-expanded="false">
 
       <span
-        v-html="svgIcon"
         aria-hidden="true"
         :aria-label="stage.title">
+        <icon
+          :name="borderlessIcon"/>
       </span>
 
       <i

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js

 import PipelineStage from '../../pipelines/components/stage.vue';
 import ciIcon from '../../vue_shared/components/ci_icon.vue';
-import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
+import icon from '../../vue_shared/components/icon.vue';
 import linkedPipelinesMiniList from '../../vue_shared/components/linked_pipelines_mini_list.vue';
 
 export default {
@@ -11,6 +11,7 @@ export default {
   components: {
     'pipeline-stage': PipelineStage,
     ciIcon,
+    icon,
     linkedPipelinesMiniList,
   },
   computed: {
@@ -22,9 +23,6 @@ export default {
 
       return hasCI && !ciStatus;
     },
-    svg() {
-      return statusIconEntityMap.icon_status_failed;
-    },
     stageText() {
       return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
     },
@@ -53,8 +51,10 @@ export default {
         <template v-if="hasCIError">
           <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
             <span
-              v-html="svg"
-              aria-hidden="true"></span>
+              aria-hidden="true">
+              <icon
+                name="status_failed"/>
+            </span>
           </div>
           <div class="media-body">
             Could not connect to the CI server. Please check your settings and try again

app/assets/javascripts/vue_shared/ci_action_icons.js

-import cancelSVG from 'icons/_icon_action_cancel.svg';
-import retrySVG from 'icons/_icon_action_retry.svg';
-import playSVG from 'icons/_icon_action_play.svg';
-import stopSVG from 'icons/_icon_action_stop.svg';
-
-/**
- * For the provided action returns the respective SVG
- *
- * @param  {String} action
- * @return {SVG|String}
- */
-export default function getActionIcon(action) {
-  const icons = {
-    icon_action_cancel: cancelSVG,
-    icon_action_play: playSVG,
-    icon_action_retry: retrySVG,
-    icon_action_stop: stopSVG,
-  };
-
-  return icons[action] || '';
-}

app/assets/javascripts/vue_shared/ci_status_icons.js

-import BORDERLESS_CANCELED_SVG from 'icons/_icon_status_canceled_borderless.svg';
-import BORDERLESS_CREATED_SVG from 'icons/_icon_status_created_borderless.svg';
-import BORDERLESS_FAILED_SVG from 'icons/_icon_status_failed_borderless.svg';
-import BORDERLESS_MANUAL_SVG from 'icons/_icon_status_manual_borderless.svg';
-import BORDERLESS_PENDING_SVG from 'icons/_icon_status_pending_borderless.svg';
-import BORDERLESS_RUNNING_SVG from 'icons/_icon_status_running_borderless.svg';
-import BORDERLESS_SKIPPED_SVG from 'icons/_icon_status_skipped_borderless.svg';
-import BORDERLESS_SUCCESS_SVG from 'icons/_icon_status_success_borderless.svg';
-import BORDERLESS_WARNING_SVG from 'icons/_icon_status_warning_borderless.svg';
-
-import CANCELED_SVG from 'icons/_icon_status_canceled.svg';
-import CREATED_SVG from 'icons/_icon_status_created.svg';
-import FAILED_SVG from 'icons/_icon_status_failed.svg';
-import MANUAL_SVG from 'icons/_icon_status_manual.svg';
-import PENDING_SVG from 'icons/_icon_status_pending.svg';
-import RUNNING_SVG from 'icons/_icon_status_running.svg';
-import SKIPPED_SVG from 'icons/_icon_status_skipped.svg';
-import SUCCESS_SVG from 'icons/_icon_status_success.svg';
-import WARNING_SVG from 'icons/_icon_status_warning.svg';
-
-export const borderlessStatusIconEntityMap = {
-  icon_status_canceled: BORDERLESS_CANCELED_SVG,
-  icon_status_created: BORDERLESS_CREATED_SVG,
-  icon_status_failed: BORDERLESS_FAILED_SVG,
-  icon_status_manual: BORDERLESS_MANUAL_SVG,
-  icon_status_pending: BORDERLESS_PENDING_SVG,
-  icon_status_running: BORDERLESS_RUNNING_SVG,
-  icon_status_skipped: BORDERLESS_SKIPPED_SVG,
-  icon_status_success: BORDERLESS_SUCCESS_SVG,
-  icon_status_warning: BORDERLESS_WARNING_SVG,
-};
-
-export const statusIconEntityMap = {
-  icon_status_canceled: CANCELED_SVG,
-  icon_status_created: CREATED_SVG,
-  icon_status_failed: FAILED_SVG,
-  icon_status_manual: MANUAL_SVG,
-  icon_status_pending: PENDING_SVG,
-  icon_status_running: RUNNING_SVG,
-  icon_status_skipped: SKIPPED_SVG,
-  icon_status_success: SUCCESS_SVG,
-  icon_status_warning: WARNING_SVG,
-};

app/assets/javascripts/vue_shared/components/ci_badge_link.vue

@@ -43,7 +43,6 @@
     computed: {
       cssClass() {
         const className = this.status.group;
-
         return className ? `ci-status ci-${className}` : 'ci-status';
       },
     },

app/assets/javascripts/vue_shared/components/ci_icon.vue

 <script>
-  import { statusIconEntityMap } from '../ci_status_icons';
+  import icon from '../../vue_shared/components/icon.vue';
 
   /**
    * Renders CI icon based on API response shared between all places where it is used.
@@ -31,11 +31,11 @@
       },
     },
 
-    computed: {
-      statusIconSvg() {
-        return statusIconEntityMap[this.status.icon];
-      },
+    components: {
+      icon,
+    },
 
+    computed: {
       cssClass() {
         const status = this.status.group;
         return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
@@ -45,7 +45,8 @@
 </script>
 <template>
   <span
-    :class="cssClass"
-    v-html="statusIconSvg">
+    :class="cssClass">
+    <icon
+      :name="status.icon"/>
   </span>
 </template>

app/assets/javascripts/vue_shared/components/icon.vue

+<script>
+
+/* This is a re-usable vue component for rendering a svg sprite
+   icon
+
+  Sample configuration:
+
+  <icon
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+  export default {
+    props: {
+      name: {
+        type: String,
+        required: true,
+      },
+
+      size: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
+
+      cssClasses: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+
+    computed: {
+      spriteHref() {
+        return `${gon.sprite_icons}#${this.name}`;
+      },
+      iconSizeClass() {
+        return this.size ? `s${this.size}` : '';
+      },
+    },
+  };
+</script>
+<template>
+  <svg
+    :class="[iconSizeClass, cssClasses]">
+    <use 
+      v-bind="{'xlink:href':spriteHref}"/>
+  </svg>
+</template>

app/assets/javascripts/vue_shared/components/linked_pipelines_mini_list.vue

 <script>
   import arrowSvg from 'icons/_arrow_mini_pipeline_graph.svg';
-  import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
+  import icon from './icon.vue';
   import ciStatus from './ci_icon.vue';
   import tooltip from '../directives/tooltip';
 
@@ -33,6 +33,7 @@
     },
     components: {
       ciStatus,
+      icon,
     },
     computed: {
       // Exactly one of these (triggeredBy and triggered) must be truthy. Never both. Never neither.
@@ -67,8 +68,8 @@
       pipelineTooltipText(pipeline) {
         return `${pipeline.project.name} - ${pipeline.details.status.label}`;
       },
-      getStatusIcon(icon) {
-        return borderlessStatusIconEntityMap[icon];
+      getStatusIcon(iconName) {
+        return `${iconName}_borderless`;
       },
       triggerButtonClass(group) {
         return `ci-status-icon-${group}`;
@@ -102,8 +103,9 @@
       :title="pipelineTooltipText(pipeline)"
       data-placement="top"
       data-container="body"
-      :class="triggerButtonClass(pipeline.details.status.group)"
-      v-html="getStatusIcon(pipeline.details.status.icon)">
+      :class="triggerButtonClass(pipeline.details.status.group)">
+      <icon
+        :name="getStatusIcon(pipeline.details.status.icon)"/>
     </a>
 
     <a

app/assets/stylesheets/pages/builds.scss

@@ -333,8 +333,10 @@
 
     svg {
       position: relative;
-      top: 2px;
+      top: 3px;
       margin-right: 3px;
+      width: 14px;
+      height: 14px;
     }
   }
 
@@ -348,9 +350,10 @@
 
     svg {
       position: relative;
-      top: 2px;
+      top: 3px;
       margin-right: 3px;
-      height: 13px;
+      height: 14px;
+      width: 14px;
     }
 
     a {
@@ -369,7 +372,7 @@
     .build-job {
       position: relative;
 
-      .fa-arrow-right {
+      .icon-arrow-right {
         position: absolute;
         left: 15px;
         top: 20px;
@@ -379,7 +382,7 @@
       &.active {
         font-weight: $gl-font-weight-bold;
 
-        .fa-arrow-right {
+        .icon-arrow-right {
           display: block;
         }
       }
@@ -392,8 +395,7 @@
         background-color: $row-hover;
       }
 
-      .fa-refresh {
-        font-size: 13px;
+      .icon-retry {
         margin-left: 3px;
       }
     }

app/assets/stylesheets/pages/merge_requests.scss

@@ -164,8 +164,9 @@
       z-index: 300;
     }
 
-    .ci-action-icon-wrapper {
-      line-height: 16px;
+    .ci-action-icon-wrapper svg {
+      width: 16px;
+      height: 16px;
     }
   }
 

app/assets/stylesheets/pages/pipelines.scss

@@ -480,7 +480,7 @@
     }
 
     // Action Icons in big pipeline-graph nodes
-    .ci-action-icon-container .ci-action-icon-wrapper {
+    .ci-action-icon-container.ci-action-icon-wrapper {
       height: 30px;
       width: 30px;
       background: $white-light;
@@ -496,8 +496,18 @@
       svg {
         fill: $gl-text-color-secondary;
         position: relative;
-        left: -1px;
-        top: -1px;
+        left: 5px;
+        top: 2px;
+        width: 18px;
+        height: 18px;
+      }
+
+      &.play {
+        svg {
+          width: #{$ci-action-icon-size - 8};
+          height: #{$ci-action-icon-size - 8};
+          left: 8px;
+        }
       }
 
       &:hover svg {
@@ -750,17 +760,49 @@ a.linked-pipeline-mini-item {
 
       svg {
         fill: $gl-text-color-secondary;
-        width: $ci-action-icon-size;
-        height: $ci-action-icon-size;
-        left: -6px;
+        width: #{$ci-action-icon-size - 6};
+        height: #{$ci-action-icon-size - 6};
+        left: -3px;
         position: relative;
-        top: -3px;
+        top: -2px;
       }
 
       &:hover svg,
       &:focus svg {
         fill: $gl-text-color;
       }
+
+      &.icon-action-retry,
+      &.icon-action-play {
+        svg {
+          width: #{$ci-action-icon-size - 6};
+          height: #{$ci-action-icon-size - 6};
+          left: 8px;
+        }
+      }
+
+      svg.icon-action-stop,
+      svg.icon-action-cancel {
+        width: 12px;
+        height: 12px;
+        top: 1px;
+        left: -1px;
+      }
+
+      svg.icon-action-play {
+        width: 11px;
+        height: 11px;
+        top: 1px;
+        left: 1px;
+      }
+
+      svg.icon-action-retry {
+        width: 16px;
+        height: 16px;
+        top: 0;
+        left: -3px;
+      }
+
     }
 
     // link to the build

app/helpers/ci_status_helper.rb

@@ -63,34 +63,34 @@ module CiStatusHelper
 
   def ci_icon_for_status(status)
     if detailed_status?(status)
-      return custom_icon(status.icon)
+      return sprite_icon(status.icon)
     end
 
     icon_name =
       case status
       when 'success'
-        'icon_status_success'
+        'status_success'
       when 'success_with_warnings'
-        'icon_status_warning'
+        'status_warning'
       when 'failed'
-        'icon_status_failed'
+        'status_failed'
       when 'pending'
-        'icon_status_pending'
+        'status_pending'
       when 'running'
-        'icon_status_running'
+        'status_running'
       when 'play'
-        'icon_play'
+        'play'
       when 'created'
-        'icon_status_created'
+        'status_created'
       when 'skipped'
-        'icon_status_skipped'
+        'status_skipped'
       when 'manual'
-        'icon_status_manual'
+        'status_manual'
       else
-        'icon_status_canceled'
+        'status_canceled'
       end
 
-    custom_icon(icon_name)
+    sprite_icon(icon_name, size: 16)
   end
 
   def pipeline_status_cache_key(pipeline_status)

app/views/ci/status/_badge.html.haml

@@ -5,9 +5,9 @@
 
 - if link && status.has_details?
   = link_to status.details_path, class: css_classes, title: title do
-    = custom_icon(status.icon)
+    = sprite_icon(status.icon)
     = status.text
 - else
   %span{ class: css_classes, title: title }
-    = custom_icon(status.icon)
+    = sprite_icon(status.icon)
     = status.text

app/views/ci/status/_dropdown_graph_badge.html.haml

@@ -7,13 +7,13 @@
 
 - if status.has_details?
   = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' }  do
-    %span{ class: klass }= custom_icon(status.icon)
+    %span{ class: klass }= sprite_icon(status.icon)
     %span.ci-build-text= subject.name
 - else
   .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
-    %span{ class: klass }= custom_icon(status.icon)
+    %span{ class: klass }= sprite_icon(status.icon)
     %span.ci-build-text= subject.name
 
 - if status.has_action?
-  = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' }  do
-    = custom_icon(status.action_icon)
+  = link_to status.action_path, class: "ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' }  do
+    = sprite_icon(status.action_icon, css_class: "icon-action-#{status.action_icon}")

app/views/projects/jobs/_sidebar.html.haml

@@ -91,7 +91,7 @@
         - builds.select{|build| build.status == build_status}.each do |build|
           .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
             = link_to project_job_path(@project, build) do
-              = icon('arrow-right')
+              = sprite_icon('arrow-right', size:16, css_class: 'icon-arrow-right')
               %span{ class: "ci-status-icon-#{build.status}" }
                 = ci_icon_for_status(build.status)
               %span
@@ -100,4 +100,5 @@
                 - else
                   = build.id
               - if build.retried?
-                %i.fa.fa-refresh.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
+                %span.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
+                  = sprite_icon('retry', size:16, css_class: 'icon-retry')

app/views/shared/_mini_pipeline_graph.html.haml

@@ -7,7 +7,7 @@
 
       .stage-container.dropdown{ class: klass }
         %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
-          = custom_icon(icon_status)
+          = sprite_icon(icon_status)
           = icon('caret-down')
 
         %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container

lib/gitlab/ci/status/build/cancelable.rb

@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_cancel'
+            'cancel'
           end
 
           def action_path

lib/gitlab/ci/status/build/failed_allowed.rb

@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def icon
-            'icon_status_warning'
+            'warning'
           end
 
           def group

lib/gitlab/ci/status/build/play.rb

@@ -12,7 +12,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_play'
+            'play'
           end
 
           def action_title

lib/gitlab/ci/status/build/retryable.rb

@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_retry'
+            'retry'
           end
 
           def action_title

lib/gitlab/ci/status/build/stop.rb

@@ -12,7 +12,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_stop'
+            'stop'
           end
 
           def action_title

lib/gitlab/ci/status/canceled.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_canceled'
+          'status_canceled'
         end
 
         def favicon

lib/gitlab/ci/status/created.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_created'
+          'status_created'
         end
 
         def favicon

lib/gitlab/ci/status/failed.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_failed'
+          'status_failed'
         end
 
         def favicon

lib/gitlab/ci/status/manual.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_manual'
+          'status_manual'
         end
 
         def favicon

lib/gitlab/ci/status/pending.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_pending'
+          'status_pending'
         end
 
         def favicon

lib/gitlab/ci/status/running.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_running'
+          'status_running'
         end
 
         def favicon

lib/gitlab/ci/status/skipped.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_skipped'
+          'status_skipped'
         end
 
         def favicon

lib/gitlab/ci/status/success.rb

@@ -11,7 +11,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_success'
+          'status_success'
         end
 
         def favicon

lib/gitlab/ci/status/success_warning.rb

@@ -15,7 +15,7 @@ module Gitlab
         end
 
         def icon
-          'icon_status_warning'
+          'status_warning'
         end
 
         def group

spec/features/merge_requests/mini_pipeline_graph_spec.rb

@@ -83,7 +83,7 @@ feature 'Mini Pipeline Graph', :js do
     end
 
     before do
-      toggle.click
+      toggle.trigger('click')
       wait_for_requests
     end
 

spec/features/projects/commit/mini_pipeline_graph_spec.rb

@@ -18,7 +18,7 @@ feature 'Mini Pipeline Graph in Commit View', :js do
 
       expect(page).to have_selector('.mr-widget-pipeline-graph')
 
-      first('.mini-pipeline-graph-dropdown-toggle').click
+      first('.mini-pipeline-graph-dropdown-toggle').trigger('click')
 
       wait_for_requests
 

spec/features/projects/pipelines/pipeline_spec.rb

@@ -67,7 +67,7 @@ describe 'Pipeline', :js do
         it 'shows a running icon and a cancel action for the running build' do
           page.within('#ci-badge-deploy') do
             expect(page).to have_selector('.js-ci-status-icon-running')
-            expect(page).to have_selector('.js-icon-action-cancel')
+            expect(page).to have_selector('.js-icon-cancel')
             expect(page).to have_content('deploy')
           end
         end
@@ -86,8 +86,8 @@ describe 'Pipeline', :js do
             expect(page).to have_content('build')
           end
 
-          page.within('#ci-badge-build .ci-action-icon-container') do
-            expect(page).to have_selector('.js-icon-action-retry')
+          page.within('#ci-badge-build .ci-action-icon-container.js-icon-retry') do
+            expect(page).to have_selector('svg')
           end
         end
 
@@ -105,8 +105,8 @@ describe 'Pipeline', :js do
             expect(page).to have_content('test')
           end
 
-          page.within('#ci-badge-test .ci-action-icon-container') do
-            expect(page).to have_selector('.js-icon-action-retry')
+          page.within('#ci-badge-test .ci-action-icon-container.js-icon-retry') do
+            expect(page).to have_selector('svg')
           end
         end
 
@@ -124,8 +124,8 @@ describe 'Pipeline', :js do
             expect(page).to have_content('manual')
           end
 
-          page.within('#ci-badge-manual-build .ci-action-icon-container') do
-            expect(page).to have_selector('.js-icon-action-play')
+          page.within('#ci-badge-manual-build .ci-action-icon-container.js-icon-play') do
+            expect(page).to have_selector('svg')
           end
         end
 

spec/helpers/ci_status_helper_spec.rb

@@ -8,17 +8,13 @@ describe CiStatusHelper do
 
   describe '#ci_icon_for_status' do
     it 'renders to correct svg on success' do
-      expect(helper).to receive(:render)
-        .with('shared/icons/icon_status_success.svg', anything)
-
-      helper.ci_icon_for_status(success_commit.status)
+      expect(helper.ci_icon_for_status('success').to_s)
+        .to include 'status_success'
     end
 
     it 'renders the correct svg on failure' do
-      expect(helper).to receive(:render)
-        .with('shared/icons/icon_status_failed.svg', anything)
-
-      helper.ci_icon_for_status(failed_commit.status)
+      expect(helper.ci_icon_for_status('failed').to_s)
+        .to include 'status_failed'
     end
   end
 

spec/javascripts/jobs/mock_data.js

@@ -22,7 +22,7 @@ export default {
     details_path: '/root/ci-mock/-/jobs/4757',
     favicon: '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
     action: {
-      icon: 'icon_action_retry',
+      icon: 'retry',
       title: 'Retry',
       path: '/root/ci-mock/-/jobs/4757/retry',
       method: 'post',

spec/javascripts/pipelines/graph/action_component_spec.js

@@ -11,7 +11,7 @@ describe('pipeline graph action component', () => {
         tooltipText: 'bar',
         link: 'foo',
         actionMethod: 'post',
-        actionIcon: 'icon_action_cancel',
+        actionIcon: 'cancel',
       },
     }).$mount();
 

spec/javascripts/pipelines/graph/dropdown_action_component_spec.js

@@ -11,7 +11,7 @@ describe('action component', () => {
         tooltipText: 'bar',
         link: 'foo',
         actionMethod: 'post',
-        actionIcon: 'icon_action_cancel',
+        actionIcon: 'cancel',
       },
     }).$mount();
 

spec/javascripts/pipelines/graph/job_component_spec.js

@@ -14,7 +14,7 @@ describe('pipeline graph job component', () => {
       group: 'success',
       details_path: '/root/ci-mock/builds/4256',
       action: {
-        icon: 'icon_action_retry',
+        icon: 'retry',
         title: 'Retry',
         path: '/root/ci-mock/builds/4256/retry',
         method: 'post',

spec/javascripts/pipelines/graph/mock_data.js

@@ -39,7 +39,7 @@ export default {
           "details_path": "/root/ci-mock/builds/4153",
           "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
           "action": {
-            "icon": "icon_action_retry",
+            "icon": "retry",
             "title": "Retry",
             "path": "/root/ci-mock/builds/4153/retry",
             "method": "post"
@@ -62,7 +62,7 @@ export default {
             "details_path": "/root/ci-mock/builds/4153",
             "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
             "action": {
-              "icon": "icon_action_retry",
+              "icon": "retry",
               "title": "Retry",
               "path": "/root/ci-mock/builds/4153/retry",
               "method": "post"
@@ -96,7 +96,7 @@ export default {
           "details_path": "/root/ci-mock/builds/4166",
           "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
           "action": {
-            "icon": "icon_action_retry",
+            "icon": "retry",
             "title": "Retry",
             "path": "/root/ci-mock/builds/4166/retry",
             "method": "post"
@@ -119,7 +119,7 @@ export default {
             "details_path": "/root/ci-mock/builds/4166",
             "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
             "action": {
-              "icon": "icon_action_retry",
+              "icon": "retry",
               "title": "Retry",
               "path": "/root/ci-mock/builds/4166/retry",
               "method": "post"
@@ -138,7 +138,7 @@ export default {
           "details_path": "/root/ci-mock/builds/4159",
           "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
           "action": {
-            "icon": "icon_action_retry",
+            "icon": "retry",
             "title": "Retry",
             "path": "/root/ci-mock/builds/4159/retry",
             "method": "post"
@@ -161,7 +161,7 @@ export default {
             "details_path": "/root/ci-mock/builds/4159",
             "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
             "action": {
-              "icon": "icon_action_retry",
+              "icon": "retry",
               "title": "Retry",
               "path": "/root/ci-mock/builds/4159/retry",
               "method": "post"

spec/javascripts/pipelines/graph/stage_column_component_spec.js

@@ -13,7 +13,7 @@ describe('stage column component', () => {
       group: 'success',
       details_path: '/root/ci-mock/builds/4256',
       action: {
-        icon: 'icon_action_retry',
+        icon: 'retry',
         title: 'Retry',
         path: '/root/ci-mock/builds/4256/retry',
         method: 'post',

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js

 import Vue from 'vue';
-import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline';
 import mockData from '../mock_data';
 import mockLinkedPipelines from '../../pipelines/graph/linked_pipelines_mock_data';
@@ -30,14 +29,6 @@ describe('MRWidgetPipeline', () => {
   });
 
   describe('computed', () => {
-    describe('svg', () => {
-      it('should have the proper SVG icon', () => {
-        const vm = createComponent({ pipeline: mockData.pipeline });
-
-        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_failed);
-      });
-    });
-
     describe('hasPipeline', () => {
       it('should return true when there is a pipeline', () => {
         expect(Object.keys(mockData.pipeline).length).toBeGreaterThan(0);
@@ -144,6 +135,7 @@ describe('MRWidgetPipeline', () => {
       Vue.nextTick(() => {
         expect(el.querySelectorAll('.js-ci-error').length).toEqual(1);
         expect(el.innerText).toContain('Could not connect to the CI server');
+        expect(el.querySelector('.ci-status-icon svg use').getAttribute('xlink:href')).toContain('status_failed');
         done();
       });
     });

spec/javascripts/vue_shared/ci_action_icons_spec.js

-import getActionIcon from '~/vue_shared/ci_action_icons';
-import cancelSVG from 'icons/_icon_action_cancel.svg';
-import retrySVG from 'icons/_icon_action_retry.svg';
-import playSVG from 'icons/_icon_action_play.svg';
-import stopSVG from 'icons/_icon_action_stop.svg';
-
-describe('getActionIcon', () => {
-  it('should return an empty string', () => {
-    expect(getActionIcon()).toEqual('');
-  });
-
-  it('should return cancel svg', () => {
-    expect(getActionIcon('icon_action_cancel')).toEqual(cancelSVG);
-  });
-
-  it('should return retry svg', () => {
-    expect(getActionIcon('icon_action_retry')).toEqual(retrySVG);
-  });
-
-  it('should return play svg', () => {
-    expect(getActionIcon('icon_action_play')).toEqual(playSVG);
-  });
-
-  it('should render stop svg', () => {
-    expect(getActionIcon('icon_action_stop')).toEqual(stopSVG);
-  });
-});

spec/javascripts/vue_shared/ci_status_icon_spec.js

-import { borderlessStatusIconEntityMap, statusIconEntityMap } from '~/vue_shared/ci_status_icons';
-
-describe('CI status icons', () => {
-  const statuses = [
-    'icon_status_canceled',
-    'icon_status_created',
-    'icon_status_failed',
-    'icon_status_manual',
-    'icon_status_pending',
-    'icon_status_running',
-    'icon_status_skipped',
-    'icon_status_success',
-    'icon_status_warning',
-  ];
-
-  it('should have a dictionary for borderless icons', () => {
-    statuses.forEach((status) => {
-      expect(borderlessStatusIconEntityMap[status]).toBeDefined();
-    });
-  });
-
-  it('should have a dictionary for icons', () => {
-    statuses.forEach((status) => {
-      expect(statusIconEntityMap[status]).toBeDefined();
-    });
-  });
-});

spec/javascripts/vue_shared/components/ci_badge_link_spec.js

@@ -11,63 +11,63 @@ describe('CI Badge Link Component', () => {
       text: 'canceled',
       label: 'canceled',
       group: 'canceled',
-      icon: 'icon_status_canceled',
+      icon: 'status_canceled',
       details_path: 'status/canceled',
     },
     created: {
       text: 'created',
       label: 'created',
       group: 'created',
-      icon: 'icon_status_created',
+      icon: 'status_created',
       details_path: 'status/created',
     },
     failed: {
       text: 'failed',
       label: 'failed',
       group: 'failed',
-      icon: 'icon_status_failed',
+      icon: 'status_failed',
       details_path: 'status/failed',
     },
     manual: {
       text: 'manual',
       label: 'manual action',
       group: 'manual',
-      icon: 'icon_status_manual',
+      icon: 'status_manual',
       details_path: 'status/manual',
     },
     pending: {
       text: 'pending',
       label: 'pending',
       group: 'pending',
-      icon: 'icon_status_pending',
+      icon: 'status_pending',
       details_path: 'status/pending',
     },
     running: {
       text: 'running',
       label: 'running',
       group: 'running',
-      icon: 'icon_status_running',
+      icon: 'status_running',
       details_path: 'status/running',
     },
     skipped: {
       text: 'skipped',
       label: 'skipped',
       group: 'skipped',
-      icon: 'icon_status_skipped',
+      icon: 'status_skipped',
       details_path: 'status/skipped',
     },
     success_warining: {
       text: 'passed',
       label: 'passed',
       group: 'success_with_warnings',
-      icon: 'icon_status_warning',
+      icon: 'status_warning',
       details_path: 'status/warning',
     },
     success: {
       text: 'passed',
       label: 'passed',
       group: 'passed',
-      icon: 'icon_status_success',
+      icon: 'status_success',
       details_path: 'status/passed',
     },
   };

spec/javascripts/vue_shared/components/icon_spec.js

+import Vue from 'vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Sprite Icon Component', function () {
+  describe('Initialization', function () {
+    let icon;
+
+    beforeEach(function () {
+      const IconComponent = Vue.extend(Icon);
+
+      icon = mountComponent(IconComponent, {
+        name: 'test',
+        size: 99,
+        cssClasses: 'extraclasses',
+      });
+    });
+
+    afterEach(() => {
+      icon.$destroy();
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(icon).toBeDefined();
+    });
+
+    it('should have <svg> as a child element', function () {
+      expect(icon.$el.tagName).toBe('svg');
+    });
+
+    it('should have <use> as a child element with the correct href', function () {
+      expect(icon.$el.firstChild.tagName).toBe('use');
+      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#test`);
+    });
+
+    it('should properly compute iconSizeClass', function () {
+      expect(icon.iconSizeClass).toBe('s99');
+    });
+
+    it('should properly render img css', function () {
+      const classList = icon.$el.classList;
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains('extraclasses');
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
+    });
+  });
+});

spec/lib/gitlab/ci/status/build/cancelable_spec.rb

@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Cancelable do
     end
 
     describe '#action_icon' do
-      it { expect(subject.action_icon).to eq 'icon_action_cancel' }
+      it { expect(subject.action_icon).to eq 'cancel' }
     end
 
     describe '#action_title' do

spec/lib/gitlab/ci/status/build/factory_spec.rb

@@ -30,7 +30,7 @@ describe Gitlab::Ci::Status::Build::Factory do
 
     it 'fabricates status with correct details' do
       expect(status.text).to eq 'passed'
-      expect(status.icon).to eq 'icon_status_success'
+      expect(status.icon).to eq 'status_success'
       expect(status.favicon).to eq 'favicon_status_success'
       expect(status.label).to eq 'passed'
       expect(status).to have_details
@@ -57,7 +57,7 @@ describe Gitlab::Ci::Status::Build::Factory do
 
       it 'fabricates status with correct details' do
         expect(status.text).to eq 'failed'
-        expect(status.icon).to eq 'icon_status_failed'
+        expect(status.icon).to eq 'status_failed'
         expect(status.favicon).to eq 'favicon_status_failed'
         expect(status.label).to eq 'failed'
         expect(status).to have_details
@@ -84,7 +84,7 @@ describe Gitlab::Ci::Status::Build::Factory do
 
       it 'fabricates status with correct details' do
         expect(status.text).to eq 'failed'
-        expect(status.icon).to eq 'icon_status_warning'
+        expect(status.icon).to eq 'warning'
         expect(status.favicon).to eq 'favicon_status_failed'
         expect(status.label).to eq 'failed (allowed to fail)'
         expect(status).to have_details
@@ -113,7 +113,7 @@ describe Gitlab::Ci::Status::Build::Factory do
 
     it 'fabricates status with correct details' do
       expect(status.text).to eq 'canceled'
-      expect(status.icon).to eq 'icon_status_canceled'
+      expect(status.icon).to eq 'status_canceled'
       expect(status.favicon).to eq 'favicon_status_canceled'
       expect(status.label).to eq 'canceled'
       expect(status).to have_details
@@ -139,7 +139,7 @@ describe Gitlab::Ci::Status::Build::Factory do
 
     it 'fabricates status with correct details' do
       expect(status.text).to eq 'running'
-      expect(status.icon).to eq 'icon_status_running'
+      expect(status.icon).to eq 'status_running'
       expect(status.favicon).to eq 'favicon_status_running'
       expect(status.label).to eq 'running'
       expect(status).to have_details
@@ -165,7 +165,7 @@ describe Gitlab::Ci::Status::Build::Factory do
 
     it 'fabricates status with correct details' do
       expect(status.text).to eq 'pending'
-      expect(status.icon).to eq 'icon_status_pending'
+      expect(status.icon).to eq 'status_pending'
       expect(status.favicon).to eq 'favicon_status_pending'
       expect(status.label).to eq 'pending'
       expect(status).to have_details
@@ -190,7 +190,7 @@ describe Gitlab::Ci::Status::Build::Factory do
 
     it 'fabricates status with correct details' do
       expect(status.text).to eq 'skipped'
-      expect(status.icon).to eq 'icon_status_skipped'
+      expect(status.icon).to eq 'status_skipped'
       expect(status.favicon).to eq 'favicon_status_skipped'
       expect(status.label).to eq 'skipped'
       expect(status).to have_details
@@ -219,7 +219,7 @@ describe Gitlab::Ci::Status::Build::Factory do
       it 'fabricates status with correct details' do
         expect(status.text).to eq 'manual'
         expect(status.group).to eq 'manual'
-        expect(status.icon).to eq 'icon_status_manual'
+        expect(status.icon).to eq 'status_manual'
         expect(status.favicon).to eq 'favicon_status_manual'
         expect(status.label).to include 'manual play action'
         expect(status).to have_details
@@ -274,7 +274,7 @@ describe Gitlab::Ci::Status::Build::Factory do
         it 'fabricates status with correct details' do
           expect(status.text).to eq 'manual'
           expect(status.group).to eq 'manual'
-          expect(status.icon).to eq 'icon_status_manual'
+          expect(status.icon).to eq 'status_manual'
           expect(status.favicon).to eq 'favicon_status_manual'
           expect(status.label).to eq 'manual stop action (not allowed)'
           expect(status).to have_details

spec/lib/gitlab/ci/status/build/failed_allowed_spec.rb

@@ -18,7 +18,7 @@ describe Gitlab::Ci::Status::Build::FailedAllowed do
 
   describe '#icon' do
     it 'returns a warning icon' do
-      expect(subject.icon).to eq 'icon_status_warning'
+      expect(subject.icon).to eq 'warning'
     end
   end
 

spec/lib/gitlab/ci/status/build/play_spec.rb

@@ -46,7 +46,7 @@ describe Gitlab::Ci::Status::Build::Play do
   end
 
   describe '#action_icon' do
-    it { expect(subject.action_icon).to eq 'icon_action_play' }
+    it { expect(subject.action_icon).to eq 'play' }
   end
 
   describe '#action_title' do

spec/lib/gitlab/ci/status/build/retryable_spec.rb

@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Retryable do
     end
 
     describe '#action_icon' do
-      it { expect(subject.action_icon).to eq 'icon_action_retry' }
+      it { expect(subject.action_icon).to eq 'retry' }
     end
 
     describe '#action_title' do

spec/lib/gitlab/ci/status/build/stop_spec.rb

@@ -38,7 +38,7 @@ describe Gitlab::Ci::Status::Build::Stop do
     end
 
     describe '#action_icon' do
-      it { expect(subject.action_icon).to eq 'icon_action_stop' }
+      it { expect(subject.action_icon).to eq 'stop' }
     end
 
     describe '#action_title' do

spec/lib/gitlab/ci/status/canceled_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Canceled do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_canceled' }
+    it { expect(subject.icon).to eq 'status_canceled' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/created_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Created do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_created' }
+    it { expect(subject.icon).to eq 'status_created' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/failed_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Failed do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_failed' }
+    it { expect(subject.icon).to eq 'status_failed' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/manual_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Manual do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_manual' }
+    it { expect(subject.icon).to eq 'status_manual' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/pending_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Pending do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_pending' }
+    it { expect(subject.icon).to eq 'status_pending' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/running_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Running do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_running' }
+    it { expect(subject.icon).to eq 'status_running' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/skipped_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Skipped do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_skipped' }
+    it { expect(subject.icon).to eq 'status_skipped' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/success_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Success do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_success' }
+    it { expect(subject.icon).to eq 'status_success' }
   end
 
   describe '#favicon' do

spec/lib/gitlab/ci/status/success_warning_spec.rb

@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::SuccessWarning do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'icon_status_warning' }
+    it { expect(subject.icon).to eq 'status_warning' }
   end
 
   describe '#group' do