Consolidate user avatar Vue logic

Creates 3 vue components:

1. user-avatar-link
2. user-avatar-image
3. user-avatar-svg

and implements them in several places.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/31017

• Port to EE
• Test each implementation manually

EE Compatible Branch: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1699

spec/javascripts/vue_shared/components/user_avatar_image_spec.js

 import Vue from 'vue';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image';
-describe('User Avatar Image Component', function () {
+fdescribe('User Avatar Image Component', function () {
   describe('Initialization', function () {
     beforeEach(function () {
       this.propsData = {
@@ -80,5 +80,70 @@ describe('User Avatar Image Component', function () {
     it('should properly render imgCssClasses', function () {
       expect(this.imageElement).toContain('avatar has-tooltip s99 myextraavatarclass');
     });
+
+  });
+
+  describe('when svg is passed', function() {
+    beforeEach(function () {
+      this.propsData = {
+        svg: avatarSvg,
+      };
+
+      this.vueInstance = new Vue({
+        data: this.propsData,
+        components: {
+          'user-avatar-image': UserAvatarImage,
+        },
+        template: `
+          <user-avatar-image
+            :svg='svg'
+          />
+        `,
+      }).$mount();
+
+      this.userAvatarImageComponent = this.vueInstance.$children[0];
+      this.iconElement = this.userAvatarImageComponent.$el.querySelector('svg');
+      this.imageElement = this.userAvatarImageComponent.$el.querySelector('img');
+    });
+
+    it('should render an svg', function() {
+      expect(this.iconElement).not.toBeNull();
+    });
+
+    it('should not render an image', function() {
+      expect(this.imageElement).toBeNull();
+    });
+  });
+
+  describe('when no svg or image source is passed', function () {
+    beforeEach(function () {
+      this.defaultAvatarUrl = 'hello_default_url';
+
+      window.gon = {
+        default_avatar_url: this.defaultAvatarUrl,
+      };
+      this.defaultAvatarUrl = gon.default_avatar_url;
+      this.propsData = {};
+
+      this.vueInstance = new Vue({
+        data: this.propsData,
+        components: {
+          'user-avatar-image': UserAvatarImage,
+        },
+        template: `
+          <user-avatar-image/>
+        `,
+      }).$mount();
+
+      this.userAvatarImageComponent = this.vueInstance.$children[0];
+    });
+
+    it('imgSourceWithFallback returns the default avatar URL', function () {
+      expect(this.userAvatarImageComponent.imgSourceWithFallback).toBe(this.defaultAvatarUrl);
+    });
+
+    it('the default avatar url is rendered', function() {
+      expect(this.userAvatarImageComponent.$el.outerHTML).toContain(this.defaultAvatarUrl);
+    });
   });
 });