Replace fa-eyes-slash with SVG eye-slash icon

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36602

app/assets/javascripts/gfm_auto_complete.js

@@ -109,8 +109,10 @@ class GfmAutoComplete {
           tpl += ' <small class="params"><%- params.join(" ") %></small>';
         }
         if (value.warning && value.icon && value.icon === 'confidential') {
-          tpl +=
-            '<small class="description"><em><i class="fa fa-eye-slash" aria-hidden="true"/><%- warning %></em></small>';
+          tpl += `<small class="description gl-display-flex gl-align-items-center">${spriteIcon(
+            'eye-slash',
+            's16 gl-mr-2',
+          )}<em><%- warning %></em></small>`;
         } else if (value.warning) {
           tpl += '<small class="description"><em><%- warning %></em></small>';
         } else if (value.description !== '') {

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

@@ -230,13 +230,15 @@ export default {
       <div class="flex-grow-1">
         <div class="title">
           <span class="issue-title-text">
-            <i
+            <gl-icon
               v-if="issuable.confidential"
               v-gl-tooltip
-              class="fa fa-eye-slash"
+              name="eye-slash"
+              class="gl-vertical-align-text-bottom"
+              :size="16"
               :title="$options.confidentialTooltipText"
               :aria-label="$options.confidentialTooltipText"
-            ></i>
+            />
             <gl-link
               :href="issuable.web_url"
               :target="isJiraIssue ? '_blank' : null"

app/helpers/issues_helper.rb

@@ -41,7 +41,7 @@ module IssuesHelper
   end
 
   def confidential_icon(issue)
-    icon('eye-slash') if issue.confidential?
+    sprite_icon('eye-slash', size: 16, css_class: 'gl-vertical-align-text-bottom') if issue.confidential?
   end
 
   def award_user_list(awards, current_user, limit: 10)

changelogs/unreleased/225938-replace-fa-eyes-slash-icons-with-gitlab-svg-eye-slash-icon.yml

+---
+title: Replace fa-eyes-slash icons with GitLab SVG eye-slash icon
+merge_request: 36602
+author:
+type: performance

spec/frontend/issuables_list/components/issuable_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlSprintf, GlLabel } from '@gitlab/ui';
+import { GlSprintf, GlLabel, GlIcon } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import { trimText } from 'helpers/text_helper';
 import initUserPopovers from '~/user_popovers';
@@ -75,7 +75,9 @@ describe('Issuable component', () => {
     window.Date = DateOrig;
   });
 
-  const findConfidentialIcon = () => wrapper.find('.fa-eye-slash');
+  const checkExists = findFn => () => findFn().exists();
+  const hasConfidentialIcon = () =>
+    wrapper.findAll(GlIcon).wrappers.some(iconWrapper => iconWrapper.props('name') === 'eye-slash');
   const findTaskStatus = () => wrapper.find('.task-status');
   const findOpenedAgoContainer = () => wrapper.find('[data-testid="openedByMessage"]');
   const findMilestone = () => wrapper.find('.js-milestone');
@@ -169,19 +171,19 @@ describe('Issuable component', () => {
     });
 
     it.each`
-      desc                       | finder
-      ${'bulk editing checkbox'} | ${findBulkCheckbox}
-      ${'confidential icon'}     | ${findConfidentialIcon}
-      ${'task status'}           | ${findTaskStatus}
-      ${'milestone'}             | ${findMilestone}
-      ${'due date'}              | ${findDueDate}
-      ${'labels'}                | ${findLabels}
-      ${'weight'}                | ${findWeight}
-      ${'merge request count'}   | ${findMergeRequestsCount}
-      ${'upvotes'}               | ${findUpvotes}
-      ${'downvotes'}             | ${findDownvotes}
-    `('does not render $desc', ({ finder }) => {
-      expect(finder().exists()).toBe(false);
+      desc                       | check
+      ${'bulk editing checkbox'} | ${checkExists(findBulkCheckbox)}
+      ${'confidential icon'}     | ${hasConfidentialIcon}
+      ${'task status'}           | ${checkExists(findTaskStatus)}
+      ${'milestone'}             | ${checkExists(findMilestone)}
+      ${'due date'}              | ${checkExists(findDueDate)}
+      ${'labels'}                | ${checkExists(findLabels)}
+      ${'weight'}                | ${checkExists(findWeight)}
+      ${'merge request count'}   | ${checkExists(findMergeRequestsCount)}
+      ${'upvotes'}               | ${checkExists(findUpvotes)}
+      ${'downvotes'}             | ${checkExists(findDownvotes)}
+    `('does not render $desc', ({ check }) => {
+      expect(check()).toBe(false);
     });
 
     it('show relative reference path', () => {
@@ -215,7 +217,7 @@ describe('Issuable component', () => {
     });
 
     it('renders the confidential icon', () => {
-      expect(findConfidentialIcon().exists()).toBe(true);
+      expect(hasConfidentialIcon()).toBe(true);
     });
   });