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/environments/components/environment_item.js

@@ -414,13 +414,6 @@ export default {
     folderUrl() {
       return `${window.location.pathname}/folders/${this.model.folderName}`;
     },
-    avatarImageConfig() {
-      return {
-        src: this.deploymentUser.avatar_url,
-        alt: this.userImageAltDescription,
-        title: this.deploymentUser.username,
-      };
-    },
   },
   /**
@@ -490,10 +483,12 @@ export default {
         <span v-if="!model.isFolder && deploymentHasUser">
           by
-          <user-avatar-link>
-            :img='avatarImageConfig'
-            :href=':href="deploymentUser.web_url'
+          <user-avatar-link
             class="js-deploy-user-container"
+            :title='deploymentUser.username'
+            :href="deploymentUser.web_url"
+            :img-src='deploymentUser.avatar_url'
+            :img-alt='userImageAltDescription'>
           </user-avatar-link>
         </span>
       </td>