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

1 files changed, 18 insertions, 11 deletions

diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index 16c0a8efcd2..564fc5029af 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -1,4 +1,6 @@
 <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.') }}