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_link.js

@@ -12,13 +12,9 @@ export default {
       type: String,
       required: false,
     },
-    imgSvg: {
-      type: String,
-      required: false,
-    },
     imgSrc: {
       type: String,
-      required: false,
+      required: true,
     },
     imgAlt: {
       type: String,
@@ -44,20 +40,13 @@ export default {
   template: `
     <a :href="href" class="user-avatar-link">
       <user-avatar-image
-        v-if="imgSrc"
         :src="imgSrc"
-        :svg="imgSvg"
         :alt="imgAlt"
         :css-classes="imgCssClasses"
         :size="imgSize"
         :tooltip-text="tooltipText"
         :tooltip-placement="tooltipPlacement"
       />
-      <user-avatar-svg
-        v-if="imgSvg && !imgSrc"
-        :svg="imgSvg"
-        :size="imgSize"
-      />
     </a>
   `,
 };