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.vue

@@ -476,17 +476,6 @@ export default {
           {{model.folderName}}
         </span>
-        <span v-if="!model.isFolder && deploymentHasUser">
-          by
-          <user-avatar-link
-            class="js-deploy-user-container"
-            :href="deploymentUser.web_url"
-            :img-src="deploymentUser.avatar_url"
-            :img-alt="userImageAltDescription"
-            :tooltip-text="deploymentUser.username"
-          />
-        </span>
-
         <span class="badge">
           {{model.size}}
         </span>
@@ -500,15 +489,13 @@ export default {
       <span v-if="!model.isFolder && deploymentHasUser">
         by
-        <a
+        <user-avatar-link
+          class="js-deploy-user-container"
           :href="deploymentUser.web_url"
-          class="js-deploy-user-container">
-          <img
-            class="avatar has-tooltip s20"
-            :src="deploymentUser.avatar_url"
-            :alt="userImageAltDescription"
-            :title="deploymentUser.username" />
-        </a>
+          :img-src="deploymentUser.avatar_url"
+          :img-alt="userImageAltDescription"
+          :tooltip-text="deploymentUser.username"
+        />
       </span>
     </td>