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

@@ -11,7 +11,7 @@ export default {
       required: false,
       default: '',
     },
-    css: {
+    cssClasses: {
       type: String,
       required: false,
       default: '',
@@ -47,8 +47,8 @@ export default {
     avatarSizeClass() {
       return `s${this.size}`;
     },
-    imgCss() {
-      return `avatar ${this.tooltipClass} ${this.avatarSizeClass} ${this.css}`;
+    imgCssClasses() {
+      return `avatar ${this.tooltipClass} ${this.avatarSizeClass} ${this.cssClasses}`;
     },
     imgSourceWithFallback() {
       if (!this.src && !this.svg) {
@@ -61,7 +61,7 @@ export default {
     <span class="avatar-image-container">
       <img
         v-if="!svg"
-        :class="imgCss"
+        :class="imgCssClasses"
         :src="imgSourceWithFallback"
         :width="size"
         :height="size"