Merge branch 'jivl-general-icons-2' into 'master'

Replace the download, fork and resolve discussion in a new issue icons

See merge request gitlab-org/gitlab-ce!15436

6 files changed, 38 insertions, 16 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index f54ea7df522..cbce9205e75 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -2,6 +2,7 @@
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -12,6 +13,7 @@
       userAvatarImage,
       totalTime,
       limitWarning,
+      icon,
     },
   };
 </script>
@@ -52,7 +54,10 @@
           </template>
           <template v-else>
             <span class="merge-request-branch" v-if="mergeRequest.branch">
-              <i class= "fa fa-code-fork"></i>
+              <icon
+                name="fork"
+                :size="16">
+              </icon>
               <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
             </span>
           </template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 5d95ddcd90e..508a411e599 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -3,6 +3,7 @@
   import iconBranch from '../svg/icon_branch.svg';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -13,6 +14,7 @@
       userAvatarImage,
       totalTime,
       limitWarning,
+      icon,
     },
     computed: {
       iconBranch() {
@@ -37,7 +39,10 @@
           <user-avatar-image :img-src="build.author.avatarUrl"/>
           <h5 class="item-title">
             <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
-            <i class="fa fa-code-fork"></i>
+            <icon
+              name="fork"
+              :size="16">
+            </icon>
             <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
             <span class="icon-branch" v-html="iconBranch"></span>
             <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index 04d5440b77b..88fa6b073ca 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -3,6 +3,7 @@
   import iconBranch from '../svg/icon_branch.svg';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -12,6 +13,7 @@
     components: {
       totalTime,
       limitWarning,
+      icon,
     },
     computed: {
       iconBuildStatus() {
@@ -40,7 +42,10 @@
             <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>
+            <icon
+              name="fork"
+              :size="16">
+            </icon>
             <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
             <span class="icon-branch" v-html="iconBranch"></span>
             <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 751a20991af..831aa92ac4f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -1,5 +1,6 @@
 <script>
   import tooltip from '../../vue_shared/directives/tooltip';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -11,6 +12,9 @@
     directives: {
       tooltip,
     },
+    components: {
+      icon,
+    },
   };
 </script>
 <template>
@@ -24,10 +28,9 @@
       data-placement="top"
       data-toggle="dropdown"
       aria-label="Artifacts">
-      <i
-        class="fa fa-download"
-        aria-hidden="true">
-      </i>
+      <icon 
+        name="download">
+      </icon>
       <i
         class="fa fa-caret-down"
         aria-hidden="true">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 13e4cb5717e..85bfd03a3cf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,5 +1,6 @@
 import tooltip from '../../vue_shared/directives/tooltip';
 import { pluralize } from '../../lib/utils/text_utility';
+import icon from '../../vue_shared/components/icon.vue';
 
 export default {
   name: 'MRWidgetHeader',
@@ -9,6 +10,9 @@ export default {
   directives: {
     tooltip,
   },
+  components: {
+    icon,
+  },
   computed: {
     shouldShowCommitsBehindText() {
       return this.mr.divergedCommitsCount > 0;
@@ -81,10 +85,9 @@ export default {
             data-toggle="dropdown"
             aria-label="Download as"
             role="button">
-            <i
-              class="fa fa-download"
-              aria-hidden="true">
-            </i>
+            <icon
+              name="download">
+            </icon>
             <i
               class="fa fa-caret-down"
               aria-hidden="true">
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 52814de8b2d..59ca9a0a6d4 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -2,13 +2,14 @@
   import commitIconSvg from 'icons/_icon_commit.svg';
   import userAvatarLink from './user_avatar/user_avatar_link.vue';
   import tooltip from '../directives/tooltip';
+  import Icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
       /**
        * Indicates the existance of a tag.
        * Used to render the correct icon, if true will render `fa-tag` icon,
-       * if false will render `fa-code-fork` icon.
+       * if false will render a svg sprite fork icon
        */
       tag: {
         type: Boolean,
@@ -107,6 +108,7 @@
     },
     components: {
       userAvatarLink,
+      Icon,
     },
     created() {
       this.commitIconSvg = commitIconSvg;
@@ -123,11 +125,10 @@
           class="fa fa-tag"
           aria-hidden="true">
         </i>
-        <i
+        <icon
           v-if="!tag"
-          class="fa fa-code-fork"
-          aria-hidden="true">
-        </i>
+          name="fork">
+        </icon>
       </div>
 
       <a