Replace `<i>` in vue components with `<icon>`

app/assets/javascripts/boards/components/issue_card_inner.vue

 <script>
   import $ from 'jquery';
+  import Icon from '~/vue_shared/components/icon.vue';
   import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import eventHub from '../eventhub';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,6 +9,7 @@
   export default {
     components: {
       UserAvatarLink,
+      Icon,
     },
     directives: {
       tooltip,
@@ -140,11 +142,11 @@
   <div>
     <div class="board-card-header">
       <h4 class="board-card-title">
-        <i
+        <icon
           v-if="issue.confidential"
-          class="fa fa-eye-slash confidential-icon"
-          aria-hidden="true"
-        ></i>
+          name="eye-slash"
+          class="confidential-icon"
+        />
         <a
           :href="issue.path"
           :title="issue.title"

app/assets/javascripts/boards/components/modal/list.vue

 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import bp from '../../../breakpoints';
   import ModalStore from '../../stores/modal_store';
   import IssueCardInner from '../issue_card_inner.vue';
@@ -6,6 +7,7 @@
   export default {
     components: {
       IssueCardInner,
+      Icon,
     },
     props: {
       issueLinkBase: {
@@ -147,13 +149,13 @@
             :issue="issue"
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"/>
-          <span
+          <icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
+            name="mobile-issue-close"
             aria-checked="true"
-            class="issue-card-selected text-center">
-            <i class="fa fa-check"></i>
-          </span>
+            class="issue-card-selected text-center"
+          />
         </div>
       </div>
     </div>

app/assets/javascripts/boards/components/modal/lists_dropdown.vue

 <script>
 import { Link } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
 import ModalStore from '../../stores/modal_store';
 import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
     'gl-link': Link,
+    Icon,
   },
   data() {
     return {
@@ -35,7 +37,9 @@ export default {
         class="dropdown-label-box">
       </span>
       {{ selected.title }}
-      <i class="fa fa-chevron-down"></i>
+      <icon
+        name="chevron-down"
+      />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>

app/assets/javascripts/boards/components/project_select.vue

 <script>
 import $ from 'jquery';
 import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../eventhub';
 import Api from '../../api';
 
 export default {
   name: 'BoardProjectSelect',
+  components: {
+    Icon,
+  },
   props: {
     groupId: {
       type: Number,
@@ -78,11 +82,9 @@ export default {
         aria-expanded="false"
       >
         {{ selectedProjectName }}
-        <i
-          class="fa fa-chevron-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -92,12 +94,11 @@ export default {
             type="button"
             class="dropdown-title-button dropdown-menu-close"
           >
-            <i
-              aria-hidden="true"
+            <icon
+              name="merge-request-close-m"
               data-hidden="true"
-              class="fa fa-times dropdown-menu-close-icon"
-            >
-            </i>
+              class="dropdown-menu-close-icon"
+            />
           </button>
         </div>
         <div class="dropdown-input">
@@ -106,12 +107,11 @@ export default {
             type="search"
             placeholder="Search projects"
           />
-          <i
-            aria-hidden="true"
+          <icon
+            name="search"
+            class="dropdown-input-search"
             data-hidden="true"
-            class="fa fa-search dropdown-input-search"
-          >
-          </i>
+          />
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">

app/assets/javascripts/cycle_analytics/components/banner.vue

 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
 
   export default {
+    components: {
+      Icon,
+    },
     props: {
       documentationLink: {
         type: String,
@@ -28,10 +32,9 @@
       type="button"
       @click="dismissOverviewDialog"
     >
-      <i
-        class="fa fa-times"
-        aria-hidden="true">
-      </i>
+      <icon
+        name="close"
+      />
     </button>
     <div
       class="svg-container"

app/assets/javascripts/diffs/components/compare_versions_dropdown.vue

@@ -115,7 +115,7 @@ export default {
       <span>
         {{ selectedVersionName }}
       </span>
-      <Icon
+      <icon
         :size="12"
         name="angle-down"
         class="position-absolute"

app/assets/javascripts/environments/components/environment_actions.vue

@@ -60,11 +60,9 @@ export default {
     >
       <span>
         <icon name="play" />
-        <i
-          class="fa fa-caret-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
         <gl-loading-icon v-if="isLoading" />
       </span>
     </button>

app/assets/javascripts/environments/components/environment_item.vue

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import tooltip from '~/vue_shared/directives/tooltip';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { humanize } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
@@ -24,6 +25,7 @@ export default {
   components: {
     UserAvatarLink,
     CommitComponent,
+    Icon,
     ActionsComponent,
     ExternalUrlComponent,
     StopComponent,
@@ -448,6 +450,10 @@ export default {
         this.canRetry
       );
     },
+
+    folderIconName() {
+      return this.model.isOpen ? 'chevron-down' : 'chevron-right';
+    },
   },
 
   methods: {
@@ -494,27 +500,15 @@ export default {
         role="button"
         @click="onClickFolder">
 
-        <span class="folder-icon">
-          <i
-            v-show="model.isOpen"
-            class="fa fa-caret-down"
-            aria-hidden="true"
-          >
-          </i>
-          <i
-            v-show="!model.isOpen"
-            class="fa fa-caret-right"
-            aria-hidden="true"
-          >
-          </i>
-        </span>
+        <icon
+          :name="folderIconName"
+          class="folder-icon"
+        />
 
-        <span class="folder-icon">
-          <i
-            class="fa fa-folder"
-            aria-hidden="true">
-          </i>
-        </span>
+        <icon
+          name="folder"
+          class="folder-icon"
+        />
 
         <span>
           {{ model.folderName }}

app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue

 <script>
 import _ from 'underscore';
 import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import frequentItemsMixin from './frequent_items_mixin';
 
 export default {
+  components: {
+    Icon,
+  },
   mixins: [frequentItemsMixin],
   data() {
     return {
@@ -45,11 +49,10 @@ export default {
       type="search"
       class="form-control"
     />
-    <i
+    <icon
       v-if="!searchQuery"
-      class="search-icon fa fa-fw fa-search"
-      aria-hidden="true"
-    >
-    </i>
+      name="search"
+      class="search-icon"
+    />
   </div>
 </template>

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

@@ -102,7 +102,6 @@ export default {
     >
       <icon
         :name="lockIcon"
-        aria-hidden="true"
         class="sidebar-item-icon is-active"
       />
     </div>
@@ -134,7 +133,6 @@ export default {
         <icon
           :size="16"
           name="lock"
-          aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
         {{ __('Locked') }}
@@ -147,7 +145,6 @@ export default {
         <icon
           :size="16"
           name="lock-open"
-          aria-hidden="true"
           class="sidebar-item-icon inline"
         />
         {{ __('Unlocked') }}

app/assets/javascripts/vue_shared/components/icon.vue

@@ -105,6 +105,7 @@ export default {
     :x="x"
     :y="y"
     :tabindex="tabIndex"
+    aria-hidden="true"
   >
     <use v-bind="{ 'xlink:href':spriteHref }"/>
   </svg>

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

@@ -37,7 +37,6 @@
       :name="warningIcon"
       :size="16"
       class="icon inline"
-      aria-hidden="true"
     />
 
     <span v-if="isLockedAndConfidential">

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -109,7 +109,7 @@ export default {
               class="system-note-commit-list-toggler flex-row"
               @click="expanded = !expanded"
             >
-              <Icon
+              <icon
                 :name="toggleIcon"
                 :size="8"
                 class="append-right-5"

app/assets/stylesheets/framework/blocks.scss

@@ -283,18 +283,20 @@
 
   .dismiss-button {
     position: absolute;
-    right: 6px;
-    top: 6px;
+    right: $gl-padding-8;
+    top: $gl-padding-8;
     cursor: pointer;
-    color: $blue-300;
+    color: $blue-500;
     z-index: 1;
     border: 0;
     background-color: transparent;
+    padding: $gl-padding-8;
+    line-height: 0;
 
     &:hover,
     &:focus {
       border: 0;
-      color: $blue-400;
+      color: $blue-700;
     }
   }
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -144,6 +144,13 @@
     top: 11px;
     right: 8px;
   }
+
+  .ic-chevron-down {
+    position: absolute;
+    top: $gl-padding-8;
+    right: $gl-padding-8;
+    color: $gray-darkest;
+  }
 }
 
 @mixin dropdown-item-hover {
@@ -561,6 +568,10 @@
   top: -1px;
 }
 
+.dropdown-menu-close-icon {
+  vertical-align: middle;
+}
+
 .dropdown-menu-back {
   left: 7px;
   top: 2px;
@@ -572,9 +583,10 @@
   padding: 0 10px;
 
   .fa,
-  .input-icon {
+  .input-icon,
+  .ic-search {
     position: absolute;
-    top: 10px;
+    top: $gl-padding-8;
     right: 20px;
     color: $dropdown-input-fa-color;
     font-size: 12px;

app/assets/stylesheets/pages/boards.scss

@@ -305,8 +305,7 @@
   }
 
   .confidential-icon {
-    position: relative;
-    top: 1px;
+    vertical-align: text-top;
     margin-right: 5px;
   }
 }

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -21,7 +21,7 @@
       }
     }
 
-    svg {
+    .svg-container svg {
       width: 136px;
       height: 136px;
     }

app/assets/stylesheets/pages/environments.scss

@@ -90,6 +90,7 @@
       margin-right: 3px;
       color: $gl-text-color-secondary;
       display: inline-block;
+      vertical-align: text-top;
 
       .fa:nth-child(1) {
         margin-right: 3px;

app/assets/stylesheets/pages/groups.scss

@@ -191,7 +191,7 @@
     }
   }
 
-  svg {
+  .svg-container svg {
     width: 62px;
     height: 50px;
   }

app/views/explore/groups/index.html.haml

@@ -13,7 +13,7 @@
 
 - if cookies[:explore_groups_landing_dismissed] != 'true'
   .explore-groups.landing.content-block.js-explore-groups-landing.hide
-    %button.dismiss-button{ type: 'button', 'aria-label' => _('Dismiss') }= icon('times')
+    %button.dismiss-button{ type: 'button', 'aria-label' => _('Dismiss') }= sprite_icon('close', size: 16)
     .svg-container
       = custom_icon('icon_explore_groups_splash')
     .inner-content

changelogs/unreleased/replace-i-to-icons-in-vue-components.yml

+---
+title: Replace i to icons in vue components
+merge_request: 20748
+author: George Tsiolis
+type: changed

spec/javascripts/environments/environments_app_spec.js

@@ -158,12 +158,7 @@ describe('Environment', () => {
         component.$el.querySelector('.folder-name').click();
 
         Vue.nextTick(() => {
-          expect(
-            component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
-          ).toContain('display: none');
-          expect(
-            component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
-          ).not.toContain('display: none');
+          expect(component.$el.querySelector('.folder-icon.ic-chevron-right')).toBe(null);
           done();
         });
       }, 0);
@@ -179,12 +174,7 @@ describe('Environment', () => {
           component.$el.querySelector('.folder-name').click();
 
           Vue.nextTick(() => {
-            expect(
-              component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
-            ).toContain('display: none');
-            expect(
-              component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
-            ).not.toContain('display: none');
+            expect(component.$el.querySelector('.folder-icon.ic-chevron-down')).toBe(null);
             done();
           });
         });