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/diff_notes/components/diff_note_avatars.js

@@ -22,9 +22,9 @@ const DiffNoteAvatars = Vue.extend({
   template: `
     <div class="diff-comment-avatar-holders"
       v-show="notesCount !== 0">
-      <div v-if="!isVisible">
+      <div v-if="!isVisible" v-for="note in notesSubset" :key="note.id">
         <!-- FIXME: Pass an alt attribute here for accessibility -->
-        <user-avatar-image v-for="note in notesSubset"
+        <user-avatar-image
           class="diff-comment-avatar js-diff-comment-avatar"
           @click="clickedAvatar($event)"
           :img-src="note.authorAvatar"