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

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.js

@@ -6,7 +6,8 @@ export default {
   props: {
     src: {
       type: String,
-      required: true,
+      required: false,
+      default: gon.default_avatar_url,
     },
     cssClasses: {
       type: String,
@@ -49,15 +50,12 @@ export default {
     imgCssClasses() {
       return `avatar ${this.tooltipClass} ${this.avatarSizeClass} ${this.cssClasses}`;
     },
-    imgSourceWithFallback() {
-      return this.src || gon.default_avatar_url;
-    },
   },
   template: `
     <img
       :class="imgCssClasses"
-      :src="imgSourceWithFallback"
-      :style="avatarSizeStylesMap"
+      :src="src"
+      :style="avatarSizeStylesMapString"
       :alt="alt"
       :data-container="tooltipContainer"
       :data-placement="tooltipPlacement"