Replace vue_shared icon with GitLab UI icon

We have hundreds of usages that utilize the vue_shared icon component
when they could be using GitLab UI. The implementations are mainly
compatible, the only difference being:

- vue_shared icon adds a class which is utilized in tests
- GitLab UI is using a data attribute

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

 <script>
-import iconsPath from '@gitlab/svgs/dist/icons.svg';
+import { GlIcon } from '@gitlab/ui';
 
-// only allow classes in images.scss e.g. s12
-const validSizes = [8, 10, 12, 14, 16, 18, 24, 32, 48, 72];
-let iconValidator = () => true;
-
-/*
- During development/tests we want to validate that we are just using icons that are actually defined
-*/
-if (process.env.NODE_ENV !== 'production') {
-  // eslint-disable-next-line global-require
-  const data = require('@gitlab/svgs/dist/icons.json');
-  const { icons } = data;
-  iconValidator = value => {
-    if (icons.includes(value)) {
-      return true;
-    }
-    // eslint-disable-next-line no-console
-    console.warn(`Icon '${value}' is not a known icon of @gitlab/gitlab-svg`);
-    return false;
-  };
-}
-
-/** This is a re-usable vue component for rendering a svg sprite icon
- *  @example
- *  <icon
- *    name="retry"
- *    :size="32"
- *    class="top"
- *  />
- */
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true,
-      validator: iconValidator,
-    },
-
-    size: {
-      type: Number,
-      required: false,
-      default: 16,
-      validator: value => validSizes.includes(value),
-    },
-  },
-
-  computed: {
-    spriteHref() {
-      return `${iconsPath}#${this.name}`;
-    },
-    iconTestClass() {
-      return `ic-${this.name}`;
-    },
-    iconSizeClass() {
-      return this.size ? `s${this.size}` : '';
-    },
-  },
-};
+export default GlIcon;
 </script>
-
-<template>
-  <svg
-    :key="spriteHref"
-    :class="[iconSizeClass, iconTestClass]"
-    aria-hidden="true"
-    v-on="$listeners"
-  >
-    <use v-bind="{ 'xlink:href': spriteHref }" />
-  </svg>
-</template>

spec/frontend/vue_shared/components/icon_spec.js

-import Vue from 'vue';
-import { mount } from '@vue/test-utils';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import iconsPath from '@gitlab/svgs/dist/icons.svg';
-import Icon from '~/vue_shared/components/icon.vue';
-
-jest.mock('@gitlab/svgs/dist/icons.svg', () => 'testing');
-
-describe('Sprite Icon Component', () => {
-  describe('Initialization', () => {
-    let icon;
-
-    beforeEach(() => {
-      const IconComponent = Vue.extend(Icon);
-
-      icon = mountComponent(IconComponent, {
-        name: 'commit',
-        size: 32,
-      });
-    });
-
-    afterEach(() => {
-      icon.$destroy();
-    });
-
-    it('should return a defined Vue component', () => {
-      expect(icon).toBeDefined();
-    });
-
-    it('should have <svg> as a child element', () => {
-      expect(icon.$el.tagName).toBe('svg');
-    });
-
-    it('should have <use> as a child element with the correct href', () => {
-      expect(icon.$el.firstChild.tagName).toBe('use');
-      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${iconsPath}#commit`);
-    });
-
-    it('should properly compute iconSizeClass', () => {
-      expect(icon.iconSizeClass).toBe('s32');
-    });
-
-    it('forbids invalid size prop', () => {
-      expect(icon.$options.props.size.validator(NaN)).toBeFalsy();
-      expect(icon.$options.props.size.validator(0)).toBeFalsy();
-      expect(icon.$options.props.size.validator(9001)).toBeFalsy();
-    });
-
-    it('should properly render img css', () => {
-      const { classList } = icon.$el;
-      const containsSizeClass = classList.contains('s32');
-
-      expect(containsSizeClass).toBe(true);
-    });
-
-    it('`name` validator should return false for non existing icons', () => {
-      jest.spyOn(console, 'warn').mockImplementation();
-
-      expect(Icon.props.name.validator('non_existing_icon_sprite')).toBe(false);
-    });
-
-    it('`name` validator should return true for existing icons', () => {
-      expect(Icon.props.name.validator('commit')).toBe(true);
-    });
-  });
-
-  it('should call registered listeners when they are triggered', () => {
-    const clickHandler = jest.fn();
-    const wrapper = mount(Icon, {
-      propsData: { name: 'commit' },
-      listeners: { click: clickHandler },
-    });
-
-    wrapper.find('svg').trigger('click');
-
-    expect(clickHandler).toHaveBeenCalled();
-  });
-});