Migrate `fa-thumbs-up/down` → `thumbs-up/down`

This MR replace the `fa-thumbs-up/down` from FontAwesome to
`thumb-up/down` from gitlab-svgs.

app/assets/javascripts/issuables_list/components/issuable.vue

@@ -6,7 +6,7 @@
 
 // TODO: need to move this component to graphql - https://gitlab.com/gitlab-org/gitlab/-/issues/221246
 import { escape, isNumber } from 'lodash';
-import { GlLink, GlTooltipDirective as GlTooltip, GlSprintf, GlLabel } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective as GlTooltip, GlSprintf, GlLabel, GlIcon } from '@gitlab/ui';
 import {
   dateInWords,
   formatDate,
@@ -18,7 +18,6 @@ import {
 import { sprintf, __ } from '~/locale';
 import initUserPopovers from '~/user_popovers';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
-import Icon from '~/vue_shared/components/icon.vue';
 import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -28,10 +27,10 @@ export default {
     openedAgo: __('opened %{timeAgoString} by %{user}'),
   },
   components: {
-    Icon,
     IssueAssignees,
     GlLink,
     GlLabel,
+    GlIcon,
     GlSprintf,
   },
   directives: {
@@ -153,14 +152,14 @@ export default {
           value: this.issuable.upvotes,
           title: __('Upvotes'),
           class: 'js-upvotes',
-          faicon: 'fa-thumbs-up',
+          icon: 'thumb-up',
         },
         {
           key: 'downvotes',
           value: this.issuable.downvotes,
           title: __('Downvotes'),
           class: 'js-downvotes',
-          faicon: 'fa-thumbs-down',
+          icon: 'thumb-down',
         },
       ];
     },
@@ -294,7 +293,7 @@ export default {
             :title="__('Weight')"
             class="d-none d-sm-inline-block js-weight"
           >
-            <icon name="weight" class="align-text-bottom" />
+            <gl-icon name="weight" class="align-text-bottom" />
             {{ issuable.weight }}
           </span>
         </div>
@@ -318,11 +317,10 @@ export default {
               v-if="meta.value"
               :key="meta.key"
               v-gl-tooltip
-              :class="['d-none d-sm-inline-block ml-2', meta.class]"
+              :class="['d-none d-sm-inline-block ml-2 vertical-align-middle', meta.class]"
               :title="meta.title"
             >
-              <icon v-if="meta.icon" :name="meta.icon" />
-              <i v-else :class="['fa', meta.faicon]"></i>
+              <gl-icon v-if="meta.icon" :name="meta.icon" />
               {{ meta.value }}
             </span>
           </template>

app/views/shared/_issuable_meta_data.html.haml

@@ -11,12 +11,12 @@
 
 - if upvotes > 0
   %li.issuable-upvotes.d-none.d-sm-block.has-tooltip{ title: _('Upvotes') }
-    = icon('thumbs-up')
+    = sprite_icon('thumb-up', size: 16, css_class: "vertical-align-middle")
     = upvotes
 
 - if downvotes > 0
   %li.issuable-downvotes.d-none.d-sm-block.has-tooltip{ title: _('Downvotes') }
-    = icon('thumbs-down')
+    = sprite_icon('thumb-down', size: 16, css_class: "vertical-align-middle")
     = downvotes
 
 %li.issuable-comments.d-none.d-sm-block

changelogs/unreleased/222534-replace-fa-thumbs-up-and-fa-thumbs-down-with-gitlab-svg-thumbs-ico.yml

+---
+title: Normalize the 'thumb-up', 'thumb-down' icon.
+merge_request: 35988
+author:
+type: other

spec/features/issuables/issuable_list_spec.rb

@@ -28,8 +28,8 @@ RSpec.describe 'issuable list', :js do
     it "counts upvotes, downvotes and notes count for each #{issuable_type.to_s.humanize}" do
       visit_issuable_list(issuable_type)
 
-      expect(first('.fa-thumbs-up').find(:xpath, '..')).to have_content(1)
-      expect(first('.fa-thumbs-down').find(:xpath, '..')).to have_content(1)
+      expect(first('.issuable-upvotes')).to have_content(1)
+      expect(first('.issuable-downvotes')).to have_content(1)
       expect(first('.fa-comments').find(:xpath, '..')).to have_content(2)
     end