Resolve "lock/confidential issuable sidebar custom svg icons iteration"

app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue

 <script>
+  import Icon from '../../vue_shared/components/icon.vue';
+
   export default {
-    computed: {
-      lockIcon() {
-        return gl.utils.spriteIcon('lock');
-      },
+    component: {
+      Icon,
     },
   };
-
 </script>
 
 <template>
   <div class="disabled-comment text-center">
-    <span class="issuable-note-warning">
-      <span class="icon" v-html="lockIcon"></span>
+    <span class="issuable-note-warning inline">
+      <icon
+        name="lock"
+        :size="16"
+        class="icon">
+      </icon>
       <span>This issue is locked. Only <b>project members</b> can comment.</span>
      </span>
   </div>

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

 <script>
 import Flash from '../../../flash';
 import editForm from './edit_form.vue';
+import Icon from '../../../vue_shared/components/icon.vue';
 
 export default {
   components: {
     editForm,
+    Icon,
   },
   props: {
     isConfidential: {
@@ -26,11 +28,8 @@ export default {
     };
   },
   computed: {
-    faEye() {
-      const eye = this.isConfidential ? 'fa-eye-slash' : 'fa-eye';
-      return {
-        [eye]: true,
-      };
+    confidentialityIcon() {
+      return this.isConfidential ? 'eye-slash' : 'eye';
     },
   },
   methods: {
@@ -49,7 +48,11 @@ export default {
 <template>
   <div class="block issuable-sidebar-item confidentiality">
     <div class="sidebar-collapsed-icon">
-      <i class="fa" :class="faEye" aria-hidden="true"></i>
+      <icon
+        :name="confidentialityIcon"
+        :size="16"
+        aria-hidden="true">
+      </icon>
     </div>
     <div class="title hide-collapsed">
       Confidentiality
@@ -70,11 +73,21 @@ export default {
         :update-confidential-attribute="updateConfidentialAttribute"
       />
       <div v-if="!isConfidential" class="no-value sidebar-item-value">
-        <i class="fa fa-eye sidebar-item-icon"></i>
+        <icon
+          name="eye"
+          :size="16"
+          aria-hidden="true"
+          class="sidebar-item-icon inline">
+        </icon>
         Not confidential
       </div>
       <div v-else class="value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-eye-slash sidebar-item-icon is-active"></i>
+        <icon
+          name="eye-slash"
+          :size="16"
+          aria-hidden="true"
+          class="sidebar-item-icon inline is-active">
+        </icon>
         This issue is confidential
       </div>
     </div>

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -2,6 +2,7 @@
 /* global Flash */
 import editForm from './edit_form.vue';
 import issuableMixin from '../../../vue_shared/mixins/issuable';
+import Icon from '../../../vue_shared/components/icon.vue';
 
 export default {
   props: {
@@ -35,11 +36,12 @@ export default {
 
   components: {
     editForm,
+    Icon,
   },
 
   computed: {
-    lockIconClass() {
-      return this.isLocked ? 'fa-lock' : 'fa-unlock';
+    lockIcon() {
+      return this.isLocked ? 'lock' : 'lock-open';
     },
 
     isLockDialogOpen() {
@@ -66,11 +68,12 @@ export default {
 <template>
   <div class="block issuable-sidebar-item lock">
     <div class="sidebar-collapsed-icon">
-      <i
-        class="fa"
-        :class="lockIconClass"
+      <icon
+        :name="lockIcon"
+        :size="16"
         aria-hidden="true"
-      ></i>
+        class="sidebar-item-icon is-active">
+      </icon>
     </div>
 
     <div class="title hide-collapsed">
@@ -98,10 +101,12 @@ export default {
         v-if="isLocked"
         class="value sidebar-item-value"
       >
-        <i
+        <icon
+          name="lock"
+          :size="16"
           aria-hidden="true"
-          class="fa fa-lock sidebar-item-icon is-active"
-        ></i>
+          class="sidebar-item-icon inline is-active">
+        </icon>
         {{ __('Locked') }}
       </div>
 
@@ -109,10 +114,12 @@ export default {
         v-else
         class="no-value sidebar-item-value hide-collapsed"
       >
-        <i
+        <icon
+          name="lock-open"
+          :size="16"
           aria-hidden="true"
-          class="fa fa-unlock sidebar-item-icon"
-        ></i>
+          class="sidebar-item-icon inline">
+        </icon>
         {{ __('Unlocked') }}
       </div>
     </div>

app/assets/javascripts/vue_shared/components/issue/issue_warning.vue

 <script>
+  import Icon from '../../../vue_shared/components/icon.vue';
+
   export default {
     props: {
       isLocked: {
@@ -14,12 +16,16 @@
       },
     },
 
+    components: {
+      Icon,
+    },
+
     computed: {
-      iconClass() {
-        return {
-          'fa-eye-slash': this.isConfidential,
-          'fa-lock': this.isLocked,
-        };
+      warningIcon() {
+        if (this.isConfidential) return 'eye-slash';
+        if (this.isLocked) return 'lock';
+
+        return '';
       },
 
       isLockedAndConfidential() {
@@ -30,12 +36,13 @@
 </script>
 <template>
   <div class="issuable-note-warning">
-    <i
-      aria-hidden="true"
-      class="fa icon"
-      :class="iconClass"
-      v-if="!isLockedAndConfidential"
-    ></i>
+    <icon
+        :name="warningIcon"
+        :size="16"
+        class="icon inline"
+        aria-hidden="true"
+        v-if="!isLockedAndConfidential">
+    </icon>
 
     <span v-if="isLockedAndConfidential">
       {{ __('This issue is confidential and locked.') }}

app/assets/stylesheets/pages/issuable.scss

@@ -6,28 +6,20 @@
 }
 
 .issuable-warning-icon {
-  color: $orange-600;
   background-color: $orange-100;
   border-radius: $border-radius-default;
-  padding: 5px;
   margin: 0 $btn-side-margin 0 0;
   width: $issuable-warning-size;
   height: $issuable-warning-size;
   text-align: center;
 
-  &:first-of-type {
-    margin-right: $issuable-warning-icon-margin;
+  .icon {
+    fill: $orange-600;
+    vertical-align: text-bottom;
   }
-}
 
-.sidebar-item-icon {
-  border-radius: $border-radius-default;
-  padding: 5px;
-  margin: 0 3px 0 -4px;
-
-  &.is-active {
-    color: $orange-600;
-    background-color: $orange-50;
+  &:first-of-type {
+    margin-right: $issuable-warning-icon-margin;
   }
 }
 

app/assets/stylesheets/pages/note_form.scss

@@ -113,6 +113,8 @@
 
   .icon {
     margin-right: $issuable-warning-icon-margin;
+    vertical-align: text-bottom;
+    fill: $orange-600;
   }
 
   + .md-area {
@@ -137,12 +139,24 @@
   }
 }
 
-.sidebar-item-value {
-  .fa {
-    background-color: inherit;
+.sidebar-item-icon {
+  border-radius: $border-radius-default;
+  margin: 0 3px 0 -4px;
+  vertical-align: middle;
+
+  &.is-active {
+    fill: $orange-600;
   }
 }
 
+.sidebar-collapsed-icon .sidebar-item-icon {
+  margin: 0;
+}
+
+.sidebar-item-value .sidebar-item-icon {
+  fill: $theme-gray-700;
+}
+
 .sidebar-item-warning-message {
   line-height: 1.5;
   padding: 16px;

app/views/projects/issues/show.html.haml

@@ -27,9 +27,9 @@
 
     .issuable-meta
       - if @issue.confidential
-        = icon('eye-slash', class: 'issuable-warning-icon')
+        .issuable-warning-icon.inline= sprite_icon('eye-slash', size: 16, css_class: 'icon')
       - if @issue.discussion_locked?
-        = icon('lock', class: 'issuable-warning-icon')
+        .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
       = issuable_meta(@issue, @project, "Issue")
 
   .issuable-actions.js-issuable-actions

app/views/projects/merge_requests/_mr_title.html.haml

@@ -16,7 +16,7 @@
 
     .issuable-meta
       - if @merge_request.discussion_locked?
-        = icon('lock', class: 'issuable-warning-icon')
+        .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
       = issuable_meta(@merge_request, @project, "Merge request")
 
   .issuable-actions.js-issuable-actions

spec/javascripts/vue_shared/components/issue/issue_warning_spec.js

@@ -16,7 +16,7 @@ describe('Issue Warning Component', () => {
         isLocked: true,
       });
 
-      expect(vm.$el.querySelector('i').className).toEqual('fa icon fa-lock');
+      expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/lock$/);
       expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is locked. Only project members can comment.');
     });
   });
@@ -27,7 +27,7 @@ describe('Issue Warning Component', () => {
         isConfidential: true,
       });
 
-      expect(vm.$el.querySelector('i').className).toEqual('fa icon fa-eye-slash');
+      expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/eye-slash$/);
       expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This is a confidential issue. Your comment will not be visible to the public.');
     });
   });
@@ -39,7 +39,7 @@ describe('Issue Warning Component', () => {
         isConfidential: true,
       });
 
-      expect(vm.$el.querySelector('i')).toBeFalsy();
+      expect(vm.$el.querySelector('.icon')).toBeFalsy();
       expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is confidential and locked. People without permission will never get a notification and won\'t be able to comment.');
     });
   });