Use SVG sprite icons

2 files changed, 14 insertions, 17 deletions

diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 58ba5aff7cf..d3817cae6dc 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -1,14 +1,14 @@
 <script>
-import { s__ } from '../../locale';
-import tooltip from '../../vue_shared/directives/tooltip';
-import modal from '../../vue_shared/components/modal.vue';
+import { s__ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+import modal from '~/vue_shared/components/modal.vue';
 import eventHub from '../event_hub';
 import { COMMON_STR } from '../constants';
-import Icon from '../../vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
+    icon,
     modal,
   },
   directives: {
@@ -65,9 +65,7 @@ export default {
       :aria-label="editBtnTitle"
       data-container="body"
       class="edit-group btn no-expand">
-      <icon
-        name="settings">
-      </icon>
+      <icon name="settings"/>
     </a>
     <a
       v-tooltip
@@ -78,9 +76,7 @@ export default {
       :aria-label="leaveBtnTitle"
       data-container="body"
       class="leave-group btn no-expand">
-      <i
-        class="fa fa-sign-out"
-        aria-hidden="true"/>
+      <icon name="leave"/>
     </a>
     <modal
       v-show="modalStatus"
diff --git a/app/assets/javascripts/groups/components/item_type_icon.vue b/app/assets/javascripts/groups/components/item_type_icon.vue
index c02a8ad6d8c..118d94d4937 100644
--- a/app/assets/javascripts/groups/components/item_type_icon.vue
+++ b/app/assets/javascripts/groups/components/item_type_icon.vue
@@ -1,7 +1,11 @@
 <script>
+import icon from '~/vue_shared/components/icon.vue';
 import { ITEM_TYPE } from '../constants';
 
 export default {
+  components: {
+    icon,
+  },
   props: {
     itemType: {
       type: String,
@@ -16,9 +20,9 @@ export default {
   computed: {
     iconClass() {
       if (this.itemType === ITEM_TYPE.GROUP) {
-        return this.isGroupOpen ? 'fa-folder-open' : 'fa-folder';
+        return this.isGroupOpen ? 'folder-open' : 'folder';
       }
-      return 'fa-bookmark';
+      return 'bookmark';
     },
   },
 };
@@ -26,9 +30,6 @@ export default {
 
 <template>
   <span class="item-type-icon">
-    <i
-      :class="iconClass"
-      class="fa"
-      aria-hidden="true"/>
+    <icon :name="iconClass"/>
   </span>
 </template>